Gradient background
We are used to css3 gradient backgrounds, such as this one :
background: #258dc8; /* Old browsers */
background: -moz-linear-gradient(top, hsla(202,69%,47%,1) 0%, hsla(202,69%,47%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(202,69%,47%,1)), color-stop(100%,hsla(202,69%,47%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(202,69%,47%,1) 0%,hsla(202,69%,47%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, hsla(202,69%,47%,1) 0%,hsla(202,69%,47%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, hsla(202,69%,47%,1) 0%,hsla(202,69%,47%,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, hsla(202,69%,47%,1) 0%,hsla(202,69%,47%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
This is pasted from http://www.colorzilla.com/gradient-editor/ (preset Blue Flat #1)
This is the best online editor to make gradients and contains a lot of presets.
Stops
A gradient has a list of gradient-stop : at least 2, for the beginning and for the end, and it can have others between to add variations.
For Blue Flat, if we look only the W3C css :
background: linear-gradient(to bottom,
hsla(202,69%,47%,1) 0%, /* beginning */
hsla(202,69%,47%,1) 100% /* end */
);
For instance, let’s add 2 between :
background: linear-gradient(to bottom,
hsla(212,67%,36%,1) 0%, /* beginning */
hsla(207,69%,51%,1) 50%, /* one at 50 */
hsla(208,73%,46%,1) 51%, /* one at 51 */
hsla(206,70%,70%,1) 100%); /* end */
This kind of stops (one just next to the other) permits to create a direct break in the gradient : to change the color from 50% to 51%, it’s only 1% of distance of the container, so, almost invisible, you just see a break.
Direction
The other parameter is the direction of the gradient. In thoses examples, it’s “to bottom”(vertical), but you can set it horizontally “to right”, or specify an angle 135deg, or else, make a radial gradient that starts from the center : ellipse at center or radial-gradient(at 50% 50%) or wherever you want using %.
Cross-browser issues
This is beautiful but we all know that the browsers handles css differently. For instance, to make a radial, you can find the notation : (center, ellipse cover,.., for a vertical gradient, you can find : “to bottom” for “top”. Moreover, the way to specify the gradient stops is also different : in Chrome it’s color-stop(0%,hsla(212,67%,36%,1)). And we don’t talk about <IE10 with the filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 );
It’s for this you should use a generator that won’t do mistakes.
The good news, is that if you support only recent browsers (such as IE10, FF20, Chrome 27), know that the W3C notation is working on those one (I don’t know since which version exactly), no need for all the variations.
background-size
You can combine the gradient with the property background-size. I’m not talking about “cover” and “contain” value, but the px and % notation (mostly the px for that).
For instance :
/* background-size: <width>px <height>px */
div {
background: linear-gradient(to bottom, hsla(192,69%,47%,1) 0%,hsla(202,69%,47%,1) 100%);
background-size: 100px 10px;
/* background-repeat: repeat; this is by default but it is needed for the effect! */
}
This will render a nice tiled background of my gradient (a repeated tile of 100px 2px) (http://jsfiddle.net/xQxbe/)
You can create things like an interlaced overlay, or old school effect with a radial gradient (http://jsfiddle.net/zhp3H/)
Test it!
Give a try on this jsfiddle to see all that in action !
http://jsfiddle.net/DVqmG/1/
Multiple background
Know that the gradients are compatible with the css3 multiple background. For browser support, check http://caniuse.com/#feat=multibackgrounds (it’s been a while it’s around). For instance, let’s make a tiled radial of 20px*20px a bit faded on its left (http://jsfiddle.net/fP2tR/):
background:
linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%),
radial-gradient(ellipse at center, hsla(212,67%,36%,1) 0%,hsla(206,70%,70%,1) 100%);
background-size:
100% 100%,
20px 20px;
You can combine that with traditional background url(…), background-repeat, background-position properties to make crazy stuff. (http://jsfiddle.net/2TpFT/)
body {
background:
radial-gradient(at 74px 32px, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 30%),
url(http://clicdata.com/Images/clicdata2.png),
linear-gradient(to right, rgb(255, 200, 200) 0%, rgba(255, 155, 155, 0) 50%, rgb(255, 200, 200) 100%),
url(http://clicdata.com/Images/pricing/pricing.jpg),
linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%),
radial-gradient(ellipse at center, hsla(212,67%,36%,1) 0%,hsla(206,70%,70%,1) 100%);
background-size:
100px 100px,
200px 30px,
60px 200px,
200px 200px,
100% 100%,
20px 20px;
background-position: 150px 20px, 50px 50px, 50px 200px, 50px 200px, top left, top left;
background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat, repeat;
}
Have fun !