{"id":2155,"date":"2016-07-22T09:53:34","date_gmt":"2016-07-22T09:53:34","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2155"},"modified":"2023-11-07T02:34:53","modified_gmt":"2023-11-07T02:34:53","slug":"css-gradient-background-with-animation-2-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/","title":{"rendered":"CSS Gradient Background with Animation: 2 Demos"},"content":{"rendered":"

Generating the gradient background in CSS<\/strong><\/h3>\n

The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images.<\/p>\n

You may use the\u00a0gradient property for different reasons; one of the purposes is to use it as background for the\u00a0whole web page or different elements.<\/p>\n

In this tutorial, I am going to show you live demos and code for gradient background CSS properties.<\/p>\n

A demo of animated background gradient<\/strong><\/h3>\n

See the demo online where magenta, cyan, and white<\/em> colors are used for linear gradients with different times of animation. It also used @-webkit-keyframes<\/em><\/strong> for hue with different angle values:<\/p>\n

\"CSS<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

The .div-gradient<\/strong> <\/em>class defines the gradient\u00a0along with its child elements, for example, this is the second div element:<\/p>\n

.div-gradient:nth-child(2) {\r\nbox-shadow: 0 0 45vmax 45vmax magenta;\r\n-webkit-animation: hue 10s 0s linear infinite,\r\nmove1 19s 0s linear infinite;\r\nanimation: hue 10s 0s linear infinite,\r\nmove1 19s 0s linear infinite;\r\n}<\/pre>\n
You can see, it defines the box-shadow, webkit-animation where the linear gradient is used. Similarly, other div element properties are set by using these and animation, etc.<\/p>\n
Get the complete code, including HTML and compiled CSS from the demo page.<\/p>\n
A demo with other color combinations and angles<\/strong><\/h3>\n
In this demo, only the colors are changed along with different angles for hue-rotate<\/em> and time of the\u00a0animation.<\/p>\n
\"CSS<\/p>\n
Complete code:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n body {\r\n  background: #000;\r\n}\r\nh1 {\r\n  position: absolute;\r\n  width: 100%;\r\n  text-align: center;\r\n  top: 48vh;\r\n  color: #fff;\r\n  font-family: 'Trebuchet MS', Helvetica, sans-serif;\r\n  letter-spacing: .7em;\r\n  font-size: 20pt;\r\n  font-weight: normal;\r\n  opacity: .2;\r\n  text-transform: uppercase;\r\n}\r\n.div-gradient {\r\n  position: absolute;\r\n  width: .001vmin;\r\n  height: .001vmin;\r\n  border-radius: 50%;\r\n  opacity: .25;\r\n}\r\n.div-gradient:nth-child(2) {\r\n  box-shadow: 0 0 45vmax 45vmax #408080;\r\n  -webkit-animation: hue 20s 0s linear infinite,\r\n    move1 19s 0s linear infinite;\r\n          animation: hue 20s 0s linear infinite,\r\n    move1 19s 0s linear infinite;\r\n}\r\n.div-gradient:nth-child(3) {\r\n  box-shadow: 0 0 45vmax 45vmax #400000;\r\n  -webkit-animation: hue 35s 0s linear infinite,\r\n    move2 25s 0s linear infinite;\r\n          animation: hue 35s 0s linear infinite,\r\n    move2 25s 0s linear infinite;\r\n}\r\n.div-gradient:nth-child(4) {\r\n  box-shadow: 0 0 45vmax 45vmax #008000;\r\n  -webkit-animation: hue 10s 0s linear infinite,\r\n    move3 15s 0s linear infinite;\r\n          animation: hue 10s 0s linear infinite,\r\n    move3 15s 0s linear infinite;\r\n  opacity: .2;\r\n}\r\n@-webkit-keyframes hue {\r\n  0% {\r\n    -webkit-filter: hue-rotate(10deg);\r\n            filter: hue-rotate(45deg);\r\n  }\r\n  100% {\r\n    -webkit-filter: hue-rotate(360deg);\r\n            filter: hue-rotate(360deg);\r\n  }\r\n}\r\n@keyframes hue {\r\n  0% {\r\n    -webkit-filter: hue-rotate(10deg);\r\n            filter: hue-rotate(45deg);\r\n  }\r\n  100% {\r\n    -webkit-filter: hue-rotate(180deg);\r\n            filter: hue-rotate(180deg);\r\n  }\r\n}\r\n@-webkit-keyframes move1 {\r\n  0% {\r\n    top: 0vh;\r\n    left: 50vw;\r\n  }\r\n  25% {\r\n    left: 0vw;\r\n  }\r\n  50% {\r\n    top: 100vh;\r\n  }\r\n  75% {\r\n    left: 100vw;\r\n  }\r\n  100% {\r\n    top: 0vh;\r\n    left: 50vw;\r\n  }\r\n}\r\n@keyframes move1 {\r\n  0% {\r\n    top: 0vh;\r\n    left: 50vw;\r\n  }\r\n  25% {\r\n    left: 0vw;\r\n  }\r\n  50% {\r\n    top: 100vh;\r\n  }\r\n  75% {\r\n    left: 100vw;\r\n  }\r\n  100% {\r\n    top: 0vh;\r\n    left: 50vw;\r\n  }\r\n}\r\n@-webkit-keyframes move2 {\r\n  0% {\r\n    top: 50vh;\r\n    left: 100vw;\r\n  }\r\n  25% {\r\n    top: 100vh;\r\n  }\r\n  50% {\r\n    left: 0vw;\r\n  }\r\n  75% {\r\n    top: 0vh;\r\n  }\r\n  100% {\r\n    top: 50vh;\r\n    left: 100vw;\r\n  }\r\n}\r\n@keyframes move2 {\r\n  0% {\r\n    top: 50vh;\r\n    left: 100vw;\r\n  }\r\n  25% {\r\n    top: 100vh;\r\n  }\r\n  50% {\r\n    left: 0vw;\r\n  }\r\n  75% {\r\n    top: 0vh;\r\n  }\r\n  100% {\r\n    top: 50vh;\r\n    left: 100vw;\r\n  }\r\n}\r\n@-webkit-keyframes move3 {\r\n  0% {\r\n    top: 100vh;\r\n    left: 50vw;\r\n  }\r\n  25% {\r\n    left: 100vw;\r\n  }\r\n  50% {\r\n    top: 0vh;\r\n  }\r\n  75% {\r\n    left: 0vw;\r\n  }\r\n  100% {\r\n    top: 100vh;\r\n    left: 50vw;\r\n  }\r\n}\r\n@keyframes move3 {\r\n  0% {\r\n    top: 100vh;\r\n    left: 50vw;\r\n  }\r\n  25% {\r\n    left: 100vw;\r\n  }\r\n  50% {\r\n    top: 0vh;\r\n  }\r\n  75% {\r\n    left: 0vw;\r\n  }\r\n  100% {\r\n    top: 100vh;\r\n    left: 50vw;\r\n  }\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>A demo of background gradient<\/h1>\r\n<div class=\"div-gradient\"><\/div>\r\n<div><\/div>\r\n<div><\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
 <\/p>\n
Credit: here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Generating the gradient background in CSS The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images. You may use the\u00a0gradient property for different reasons; one of the purposes is to use it as background for the\u00a0whole web page or different elements. In … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2156,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[41],"yoast_head":"\nCSS Gradient Background with Animation: 2 Demos<\/title>\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.jquery-az.com\/css-gradient-background-with-animation-2-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Gradient Background with Animation: 2 Demos\" \/>\n<meta property=\"og:description\" content=\"Generating the gradient background in CSS The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images. You may use the\u00a0gradient property for different reasons; one of the purposes is to use it as background for the\u00a0whole web page or different elements. In ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-22T09:53:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-07T02:34:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/10.0_1-CSS-gradient-background.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"389\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/\",\"name\":\"CSS Gradient Background with Animation: 2 Demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-07-22T09:53:34+00:00\",\"dateModified\":\"2023-11-07T02:34:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Gradient Background with Animation: 2 Demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Gradient Background with Animation: 2 Demos","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.jquery-az.com\/css-gradient-background-with-animation-2-demos\/","og_locale":"en_US","og_type":"article","og_title":"CSS Gradient Background with Animation: 2 Demos","og_description":"Generating the gradient background in CSS The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images. You may use the\u00a0gradient property for different reasons; one of the purposes is to use it as background for the\u00a0whole web page or different elements. In ... Read more","og_url":"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/","article_published_time":"2016-07-22T09:53:34+00:00","article_modified_time":"2023-11-07T02:34:53+00:00","og_image":[{"width":527,"height":389,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/10.0_1-CSS-gradient-background.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/","url":"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/","name":"CSS Gradient Background with Animation: 2 Demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-07-22T09:53:34+00:00","dateModified":"2023-11-07T02:34:53+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/css-gradient-background-with-animation-2-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"CSS Gradient Background with Animation: 2 Demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2155"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2155"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2155\/revisions"}],"predecessor-version":[{"id":11183,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2155\/revisions\/11183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2156"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}