{"id":5789,"date":"2015-07-21T12:15:44","date_gmt":"2015-07-21T09:15:44","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5789"},"modified":"2018-01-08T14:16:51","modified_gmt":"2018-01-08T12:16:51","slug":"css-gradient-background-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/","title":{"rendered":"CSS Gradient Background Example"},"content":{"rendered":"

The aim of this example is to create and style gradient backgrounds.<\/p>\n

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen.<\/p>\n

CSS gradients are new types of image<\/code> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, reducing download time and bandwidth usage.<\/p>\n

Browsers support two types of gradients: linear, defined with the linear-gradient()<\/code> function, and radial, defined with radial-gradient()<\/code>.
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Document Setup<\/h2>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Gradient Background Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
To set up our HTML, lets just add a div with some text inside, there is nothing else we need for now.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"gradient_nr\">Gradient Background<\/div>\r\n<\/pre>\n
Also, in your CSS code set up a box-like view of the current div.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\ndiv {\r\n    font-family: \"Raleway\";\r\n    margin: 5em;\r\n    width: 25em;\r\n    height: 8em;\r\n    border: 1px solid #ccc;\r\n    text-align: center;\r\n    line-height: 8em;\r\n}\r\n<\/style>\r\n<\/pre>\n
For now, we’d have a box with a centered text, it is here inside the box that gradient backgrounds are going to be added.
\n
\"Initial<\/a>
Initial Element<\/figcaption><\/figure><\/p>\n
2. Linear Gradients<\/h2>\n
Gradients of this type can be applied using the syntax below (you can replace background<\/code> with background-image<\/code>) background: linear-gradient(direction, color-stop1, color-stop2, ...);<\/code>.<\/p>\n
Let’s see an example of a gradient with two color stops and declared to be compatible with all browsers:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\ngradient1 {\r\n    background: -webkit-linear-gradient(green, blue); \/* For Safari 5.1 to 6.0 *\/\r\n    background: -o-linear-gradient(green, blue); \/* For Opera 11.1 to 12.0 *\/\r\n    background: -moz-linear-gradient(green, blue); \/* For Firefox 3.6 to 15 *\/\r\n    background: linear-gradient(green, blue); \/* Standard syntax (must be last) *\/\r\n}\r\n<\/style>\r\n<\/pre>\n
\"Two-Color<\/a>
Two-Color Linear Gradient<\/figcaption><\/figure>
\nNotice we haven’t set a direction for the gradient, that means the default one is top to bottom as you can see.<\/p>\n
Another example of a linear gradient would be a gradient with multiple color:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient2 {\r\n    background: -webkit-linear-gradient(green, blue, red); \/* For Safari 5.1 to 6.0 *\/\r\n    background: -o-linear-gradient(green, blue, red); \/* For Opera 11.1 to 12.0 *\/\r\n    background: -moz-linear-gradient(green, blue, red); \/* For Firefox 3.6 to 15 *\/\r\n    background: linear-gradient(green, blue, red); \/* Standard syntax (must be last) *\/\r\n}\r\n<\/style>\r\n<\/pre>\n
\"Three-Color<\/a>
Three-Color Linear Gradient<\/figcaption><\/figure>\n
Enough with top to bottom directions. The following will show a left to right gradient, as easy as adding a left<\/code> keyword before colors.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient3 {\r\n    background: -webkit-linear-gradient(left, darkorange, lightcoral, floralwhite); \r\n    background: -o-linear-gradient(left, darkorange, lightcoral, floralwhite);\r\n    background: -moz-linear-gradient(left, darkorange, lightcoral, floralwhite); \r\n    background: linear-gradient(left, darkorange, lightcoral, floralwhite); \r\n}\r\n<\/style>\r\n<\/pre>\n
\"Three-Color<\/a>
Three-Color Linear Gradient with Left to Right Color Direction<\/figcaption><\/figure>\n
But the direction keyword in not limited to one, we can have somehting like the following to create a diagonal gradient:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient4 {\r\n    background: -webkit-linear-gradient(left top, darkorange, lightcoral);\r\n    background: -o-linear-gradient(left top, darkorange, lightcoral); \r\n    background: -moz-linear-gradient(left top, darkorange, lightcoral); \r\n    background: linear-gradient(left top, darkorange, lightcoral); \r\n}\r\n<\/style>\r\n<\/pre>\n
\"Digaonal<\/a>
Digaonal Three-Color Linear Gradient<\/figcaption><\/figure>\n
The last example for this section will be a gradient, the direction of which is declared in degrees and colors in HEX.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient5 {\r\n    background: -webkit-linear-gradient(180deg, #b7e8f2, #90c7e6 );\r\n    background: -o-linear-gradient(180deg, #b7e8f2, #90c7e6 ); \r\n    background: -moz-linear-gradient(180deg, #b7e8f2, #90c7e6 ); \r\n    background: linear-gradient(180deg, #b7e8f2, #90c7e6); \r\n}\r\n<\/style>\r\n<\/pre>\n
\"Two-color<\/a>
Two-color Linear Gradient with a 180deg Direction<\/figcaption><\/figure>\n
3. Radial Gradients<\/h2>\n
A radial gradient is defined by its center. You must declare at least two colors for it to work. The syntax would be:
\nbackground: radial-gradient(shape size at position, start-color, ..., last-color);<\/code><\/p>\n
Let’s start with a radial gradient made of three colors set in hexadecimal.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient6 {\r\n    background: -webkit-radial-gradient(#FF530D, #E82C0C, #E80C7A); \/* Safari 5.1 to 6.0 *\/\r\n    background: -o-radial-gradient(#FF530D, #E82C0C, #E80C7A); \/* For Opera 11.6 to 12.0 *\/\r\n    background: -moz-radial-gradient(#FF530D, #E82C0C, #E80C7A); \/* For Firefox 3 to 15 *\/\r\n    background: radial-gradient(#FF530D, #E82C0C, #E80C7A); \/* Standard syntax *\/\r\n}\r\n<\/style>\r\n<\/pre>\n
\"Three-Color<\/a>
Three-Color Radial Gradient<\/figcaption><\/figure>\n
Next, we’ll see a gradient that doesn’t have equal space between color steps. Instead, we decide how much space each color uses.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient7 {\r\n    background: -webkit-radial-gradient(#E8E37B 5%, #DBE899 15%, #62EEFF 80%); \r\n    background: -o-radial-gradient(#E8E37B 5%, #DBE899 15%, #62EEFF 80%); \r\n    background: -moz-radial-gradient(#E8E37B 5%, #DBE899 15%, #62EEFF 80%); \r\n    background: radial-gradient(#E8E37B 5%, #DBE899 15%, #62EEFF 80%); \r\n}\r\n<\/style>\r\n<\/pre>\n
\"Three-Color<\/a>
Three-Color Radial Gradient with Differently Spaced Colors<\/figcaption><\/figure>\n
Last but not least, you can define shapes which will guide the gradient colors.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.gradient8 {\r\n    background: -webkit-radial-gradient(circle, #DEE8AE, #B097E8,#FF9134);\r\n    background: -o-radial-gradient(circle, #DEE8AE, #B097E8,#FF9134);\r\n    background: -moz-radial-gradient(circle, #DEE8AE, #B097E8,#FF9134); \r\n    background: radial-gradient(circle, #DEE8AE, #B097E8,#FF9134);\r\n}\r\n<\/style>\r\n<\/pre>\n
\"Three-Color<\/a>
Three-Color Radial Gradient with Circle Shape Defined<\/figcaption><\/figure>\n
4. Conclusion<\/h2>\n
To conclude, it is clear that gradients are an easy and fancy way to style your backrounds around the page. There are even
\nmore tools like gradient repeating that you can try. Additionally, there are dozens of websites that let you style color
\nbased gradients in a graphical way and then give you the CSS for that.<\/p>\n
A website I would recommend is CSS Matic<\/a>. However, if you feel creative enough to style your own gradients, that is better and helps you understand.<\/p>\n
Gradients are the best way to avoid images that show the same in terms of performance and readability.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS3 Gradient Background<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. CSS gradients are new types …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Gradient Background Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Gradient Background Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-21T09:15:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:16:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Gradient Background Example\",\"datePublished\":\"2015-07-21T09:15:44+00:00\",\"dateModified\":\"2018-01-08T12:16:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\"},\"wordCount\":638,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\",\"name\":\"CSS Gradient Background Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-21T09:15:44+00:00\",\"dateModified\":\"2018-01-08T12:16:51+00:00\",\"description\":\"The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Gradient Background Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Gradient Background Example - Web Code Geeks - 2026","description":"The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Gradient Background Example - Web Code Geeks - 2026","og_description":"The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-07-21T09:15:44+00:00","article_modified_time":"2018-01-08T12:16:51+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Gradient Background Example","datePublished":"2015-07-21T09:15:44+00:00","dateModified":"2018-01-08T12:16:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/"},"wordCount":638,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/","name":"CSS Gradient Background Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-21T09:15:44+00:00","dateModified":"2018-01-08T12:16:51+00:00","description":"The aim of this example is to create and style gradient backgrounds. Gradients are typically one color that fades into another, but in CSS you can control","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-gradient-background-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Gradient Background Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5789"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5789\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}