Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
Summary
The <gradient>
CSS data type denotes a CSS <image>
made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color>
but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.
There are three kinds of color gradients:
- linear gradients, generated by the
linear-gradient()
function, where the color smoothly fades along an imaginary line.body { background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); }
- radial gradients, generated by the
radial-gradient()
function. The more away from an origin a point is, the more far from the original color it is.body { background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; background: radial-gradient(red, yellow, rgb(30, 144, 255)); }
- repeating gradients, which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
body { background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); }
Like with any case involving interpolation of colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of grey to appear when both the color and the opacity are varying.
Specification
Specification | Status | Comment |
---|---|---|
CSS Image Values and Replaced Content Module Level 3 The definition of '<gradient>' in that specification. |
Candidate Recommendation |
Browser compatibility
Each different gradient type has a different compatibility matrix. Please consult each individual article.