{"id":448,"date":"2013-11-12T09:36:33","date_gmt":"2013-11-12T09:36:33","guid":{"rendered":"http:\/\/www.advancedwebhelp.com\/blog\/?p=448"},"modified":"2013-11-13T05:31:50","modified_gmt":"2013-11-13T05:31:50","slug":"css3-background-gradients","status":"publish","type":"post","link":"https:\/\/www.advancedwebhelp.com\/blog\/2013\/css3-background-gradients","title":{"rendered":"CSS3 Background Gradients"},"content":{"rendered":"<h1>Using CSS for Gradients in Backgrounds<\/h1>\n<p><a href=\"http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-332 alignright\" style=\"margin-top: -20px;\" alt=\"CSS logo\" src=\"http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css.png\" width=\"200\" height=\"180\" srcset=\"https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css.png 200w, https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css-148x133.png 148w, https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css-31x27.png 31w, https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css-38x34.png 38w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<p>Gradients may be used in backgrounds via CSS.  This is not available by CSS in all browsers, but, the feature is coming along.  Even browsers that support gradients may have some holes in their functionality.  This feature is defined in CSS3, use it and include fallback handling.  Though the CSS3 version is not supported by all new browsers, it will be available soon.  It has been available for webkit, opera, mos, and ms for some time, at least to some level.  The following explains how the gradient can be used reasonably reliable across browsers.  While the oldest Safari and Chrome syntax is shown in the cross browser samples, they are very different format from the current CSS3 syntax.  That will be used, but, not discussed here.  Meanwhile the new Mozilla, and the more recent webkit, mos and ms are very similar in format to the CSS3 syntax, and will be discussed below.<\/p>\n<p>Plan for the following format in the future:<\/p>\n<p><strong>linear-gradient (angleOrlocation, stop1 [%], stop2 [%], [stop3 [%], [&#8230;]]])<\/strong><\/p>\n<p><\/p>\n<ul>\n<li>\n<p>angleOrlocation &#8211; This indicates the location\/direction that the gradient will go. The value may be:<\/p>\n<ul>\n<li>Defined in degrees, such as 30degree, or 190deg<\/li>\n<li>Listed as {top, bottom, left, right, top left, top right, bottom left, bottom right, circle}, indicating where the gradient starts.  Top would result in vertical gradient from top to bottom.  Left would result in horizontal running left to right<\/li>\n<\/ul>\n<\/li>\n<li>stop1 x% &#8211; the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band. <\/li>\n<li>stop2 x% &#8211; the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stop3 x% &#8211; the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stop  x% &#8230;. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stopN &#8211; the color to blend to from the previous stop.<\/li>\n<\/ul>\n<p>Note: In the previous discussion, I refer to the positioning of the color by %.  Actually, the value can be given in % or other measuring method, such as; px, rem, em, &#8230;<\/p>\n<p><strong>radial-gradient([% %,] [type,] [size,] stop1 [%], stop2 [%], [stop3 [%], [&#8230;]]])<\/strong><\/p>\n<p><\/p>\n<ul>\n<li>\n<p>[% %] &#8211; this is the location of the center of the shape, such as 80% 20%.  If this field is not present, the shape is centered in the DIV.<\/p>\n<\/li>\n<li>type &#8211; identify if the shape will be {circle, ellipse }.  If this field is not present, ellipse is used\n<li>size &#8211; the size is specified relative to { closest-side, farthest-side, closest-corner, farthest-corner, contain, cover }<\/li>\n<li>stop1 x% &#8211; the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stop2 x% &#8211; the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stop3 x% &#8211; the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stop  x% &#8230;. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band<\/li>\n<li>stopN &#8211; the color to blend to from the previous stop.<\/li>\n<\/ul>\n<p>Note: In the previous discussion, I refer to the positioning of the color and center by %.  Actually, the value can be given in % or other measuring method, such as; px, rem, em, &#8230;<\/p>\n<h1>Using CSS to create a Horizontal Gradient Background on a DIV<\/h1>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"horizontal-grad\"><code>\r\n  .horizontal-grad {\r\n    \/* fallback *\/\r\n    background-color: #1a82f7 url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/horizontal-gradient.jpg) repeat-y ; \r\n    \/* Safari 4-5, Chrome 1-9 *\/\r\n    background: -webkit-gradient(linear, left top, right top,\r\n        from(#ff661c), to(#ffb61d)); \r\n    \/* Safari 5.1, Chrome 10+ *\/\t\r\n    background: -webkit-linear-gradient(left, #ff661c, #ffb61d); \r\n    \/* Firefox 3.6+ *\/\r\n    background: -moz-linear-gradient(left, #ff661c, #ffb61d);\r\n    \/* IE 10 *\/\r\n    background: -ms-linear-gradient(left, #ff661c, #ffb61d);\r\n    \/* Opera 11.10+ *\/\r\n    background: -o-linear-gradient(left, #ff661c, #ffb61d);\r\n    \/* CSS3 *\/    \r\n    background: linear-gradient(left, #ff661c,  #ffb61d) ;\r\n  }\r\n<\/code><\/pre>\n<\/aside>\n<h1>Using CSS to Create a Vertical Gradient on a DIV<\/h1>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"vertical-grad box-rotate\"><code>\r\n.vertical-grad {\r\n  \/* fallback *\/\r\n  background: #1a82f7  url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/vertical-gradient.jpg)  repeat-x ;\r\n  \/* Safari 4-5, Chrome 1-9 *\/  \r\n  background: -webkit-gradient(linear, 0% 0%, 0% 100%, \r\n      from(#ff661c), to(#ffb61d));\r\n  \/* Safari 5.1, Chrome 10+ *\/\t       \r\n  background: -webkit-linear-gradient(top, #ff661c, #ffb61d);\r\n  \/* Firefox 3.6+ *\/  \r\n  background: -moz-linear-gradient(top, #ff661c, #ffb61d);\r\n  \/* IE 10 *\/  \r\n  background: -ms-linear-gradient(top, #ff661c, #ffb61d);\r\n  \/* Opera 11.10+ *\/  \r\n  background: -o-linear-gradient(top, #ff661c, #ffb61d);\r\n  \/* CSS3 *\/\r\n  background: linear-gradient(top, #ff661c,  #ffb61d) ;       \r\n}<\/code><\/pre>\n<\/aside>\n<h1>Using CSS to Include Multiple Band Gradients on a DIV<\/h1>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"multicolor-grad\"><code>\r\n.multicolor-grad {\r\n  background: #1a82f7  url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/multiple-bands.jpg)  repeat-y ;\r\n  \/* For Safari *\/\r\n  background: -webkit-linear-gradient(#ff661c, #ffb61d, #ffffff);\r\n   \/* For Opera 11.1 to 12.0 *\/\r\n  background: -o-linear-gradient(#ff661c, #ffb61d, #ffffff);\r\n  \/* For Firefox 3.6 to 15 *\/\r\n  background: -moz-linear-gradient(#ff661c, #ffb61d, #ffffff);\r\n  \/* CSS3 *\/\r\n  background: linear-gradient(#ff661c, #ffb61d, #ffffff); \r\n} \r\n\r\n<\/code><\/pre>\n<\/aside>\n<h1>Using CSS to Create an Even Stop Gradient on a DIV<\/h1>\n<p>If you would like an even stop gradient on selected DIV, there is a CSS3 option to handle this situation.<br \/>\nThis is available in CSS3, and special case options for old -webkit, and -mos browsers.<\/p>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"even-stops\"><code>\r\n.even-stops {\r\n    \/* fallback *\/\r\n    background: #1a82f7  url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/even-bands.jpg)  repeat-x ;\r\n    \/* Safari 4-5, Chrome 1-9 *\/\r\n    background: -webkit-gradient(linear, left top, right top,\r\n      from(#ff661c), \r\n      color-stop(0.25, #ffb61d), color-stop(0.5, #ff661c),\r\n      color-stop(0.75, #ffb61d), to(#ff661c));\r\n    \/* Safari 5.1+, Chrome 10+ *\/  \r\n    background: -webkit-linear-gradient(left,\r\n      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c); \r\n    \/* Firefox 3.6+ *\/  \r\n    background: -moz-linear-gradient(left,\r\n      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c);\r\n    \/* IE 10 *\/  \r\n    background: -ms-linear-gradient(left,\r\n      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c);\r\n    \/* Opera 11.10+ *\/  \r\n    background: -o-linear-gradient(left,\r\n      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c);\r\n    \/* CSS3 *\/\r\n    background: linear-gradient(left,\r\n      #ff661c,  #ffb61d, #ff661c,  #ffb61d, #ff661c) ;    \r\n  }\r\n<\/code><\/pre>\n<\/aside>\n<h1>Using CSS to Create an arbitrary Stop Gradient on a DIV<\/h1>\n<p>If you would like an arbitrary stop gradient on selected DIV, there is a CSS3 option to handle this situation.<br \/>\nThis is available in CSS3, and special case options for old -webkit, and -mos browsers.<\/p>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"arbitrary-stops\"><code>\r\n  .arbitrary-stops {\r\n    \/* fallback *\/\r\n    background: #1a82f7  url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/positioned-bands.jpg)  repeat-y ;\r\n    \/* Safari 4-5, Chrome 1-9 *\/  \r\n    background: -webkit-gradient(linear, left top, right top, from(#ff661c), \r\n      color-stop(0.05, #ffb61d), color-stop(0.5, #ff661c),\r\n      color-stop(0.95, #ffb61d), to(#2F2727));\r\n    \/* Safari 5.1+, Chrome 10+ *\/  \r\n    background: -webkit-linear-gradient(left,\r\n      #ff661c, #ffb61d 5%, #ff661c,#ffb61d 95%,#ff661c);\r\n    \/* Firefox 3.6+ *\/  \r\n    background: -moz-linear-gradient(left,\r\n      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c);\r\n    \/* IE 10 *\/  \r\n    background: -ms-linear-gradient(left,\r\n      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c);\r\n    \/* Opera 11.10+ *\/  \r\n    background: -o-linear-gradient(left,\r\n      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c);\r\n    \/* CSS3 *\/\r\n    background: linear-gradient(left,\r\n      #ff661c,  #ffb61d 5%, #ff661c,  #ffb61d 95%, #ff661c) ; \r\n  }\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"gap\">Notice the use of 5% and 95% to affect the location at which the color band is to start, and therefore affects the width of the transition bands.<\/p>\n<h1>Using CSS to Create a Diagonal Gradient on a DIV<\/h1>\n<p>If you would like a diagonal gradient on selected DIV, there is a CSS3 option to handle this situation.<br \/>\nThis is available in CSS3, and special case options for old -webkit, and -mos browsers.<\/p>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"diagonal-grad\"><code>\r\n  .diagonal-grad {\r\n    \/* For Safari *\/\r\n    background: -webkit-linear-gradient(left top, #ffb61d,#ff661c);\r\n    \/* For Opera 11.1 to 12.0 *\/\r\n    background: -o-linear-gradient(bottom right, #ffb61d,#ff661c);\r\n    \/* For Firefox 3.6 to 15 *\/\r\n    background: -moz-linear-gradient(bottom right, #ffb61d,#ff661c);\r\n    \/* CSS3 *\/\r\n    background: linear-gradient(bottom right, #ffb61d,#ff661c); \r\n}\r\n\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"gap\">Notice:  To go from top left to bottom right, the standard requires the specification of the end location, <b>bottom right<\/b>. Safari (webkit) reverses the logic of the location to specify in the first parameter. Webkit expects the use of the begin point of the diagonal.  If you want to go from top left to bottom right, specify <b>top left<\/b>.<\/p>\n<h1>Using CSS to Create an Angled Gradient on a DIV<\/h1>\n<p>If you would like a gradient at a specific angle on selected DIV, there is a CSS3 option to handle this situation.<br \/>\nThis is available in CSS3, and special case options for old -webkit, and -mos browsers.<\/p>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"angled-grad\"><code>\r\n\r\n  .angled-grad {\r\n    \/* For Safari *\/\r\n    background: -webkit-linear-gradient(30deg, #ffb61d, #ff661c);\r\n    \/* For Opera 11.1 to 12.0 *\/\r\n    background: -o-linear-gradient(30deg, #ffb61d, #ff661c);\r\n    \/* For Firefox 3.6 to 15 *\/ \r\n    background: -moz-linear-gradient(30deg, #ffb61d, #ff661c);\r\n    \/* CSS3 *\/\r\n    background: linear-gradient(30deg, #ffb61d, #ff661c); \r\n  }\r\n<\/code><\/pre>\n<\/aside>\n<h1>Using CSS to Create a Radial Gradient on a DIV<\/h1>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"radial-center\"><code>\r\n  .radial-center {\r\n    \/* fallback *\/\r\n    background: #2F2727 url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/Radial.jpg) center center no-repeat;\r\n    \/* Safari 4-5, Chrome 1-9 *\/\r\n    background: -webkit-gradient(radial, center center, 0, center center, 360, \r\n      from(#ffec1d), to(#ff661c)) ;\r\n    \/* Safari 5.1+, Chrome 10+ *\/  \r\n    background: -webkit-radial-gradient(circle,\r\n      #ffec1d,  #ff661c);\r\n    \/* Firefox  *\/   \r\n    background: -moz-radial-gradient(circle, #ffed1d,  #ff661c);\r\n    \/* IE 10 *\/\r\n    background: -ms-radial-gradient(circle, #ffec1d,  #ff661c);\r\n    \/* CSS3 *\/\r\n    background: radial-gradient(circle, #ffec1d,  #ff661c); \r\n    \/* Opera couldn't do radial gradients, then at some point\r\n       they started supporting the -webkit- syntax, how it kinda\r\n       does but it's kinda broken (doesn't do sizing) *\/\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"gap\">Notice: for circular gradients, the first parameter is replace with the value <b>circle<\/b>.   You may use the percent on the color bands to position from the center of the circle.<\/p>\n<h1>Using CSS to Create a Positioned Radial Gradient on a DIV<\/h1>\n<p>If you would like a positioned radial gradient on selected DIV, there is a CSS3 option to handle this situation.<br \/>\nThis is available in CSS3, and special case options for old -webkit, and -mos browsers.<\/p>\n<aside class=\"sample\">\n<h1><label>CSS<\/label>Sample<\/h1>\n<pre class=\"radial-position\"><code>\r\n  .radial-position {\r\n    \/* fallback *\/\r\n    background: #2F2727 url(http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/positioned-radial.jpg) center center no-repeat;\r\n     \/* Safari 4-5, Chrome 1-9 *\/\r\n    background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100,\r\n      from(#ffec1d), to(#ffb61d));\r\n    \/* Safari 5.1+, Chrome 10+ *\/  \r\n    background: -webkit-radial-gradient(80% 20%, closest-corner,\r\n      #ffec1d,  #ff661c);\r\n    \/* Firefox 3.6+ *\/  \r\n    background: -moz-radial-gradient(80% 20%, closest-corner,\r\n      #ffec1d,  #ff661c); \r\n     \/* IE 10 *\/  \r\n    background: -ms-radial-gradient(80% 20%, closest-corner,\r\n      #ffec1d,  #ff661c);\r\n    \/* CSS3 *\/  \r\n    background: radial-gradient(80% 20%, closest-corner,\r\n      #ffec1d,  #ff661c); \r\n\r\n  \/* Opera cannot do radial gradients yet *\/\r\n} \r\n<\/code><\/pre>\n<\/aside>\n","protected":false},"excerpt":{"rendered":"<p>Using CSS for Gradients in Backgrounds Gradients may be used in backgrounds via CSS. This is not available by CSS in all browsers, but, the feature is coming along. Even browsers that support gradients may have some holes in their functionality. This feature is defined in CSS3, use it and include fallback handling. Though the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-448","post","type-post","status-publish","format-standard","hentry","category-css","category-html5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/comments?post=448"}],"version-history":[{"count":2,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/448\/revisions"}],"predecessor-version":[{"id":481,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/448\/revisions\/481"}],"wp:attachment":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/media?parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/categories?post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/tags?post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}