CSS-Tricks Example

CSS3 Gradient Backgrounds

Linear Gradient (Top → Bottom)

Linear Gradient (Left → Right)

Linear Gradient (with Even Stops)

Linear Gradient (with Specified Arbitrary Stops)

Radial Gradient (Centered, Full Size)

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

Shape keywords: circle, ellipse

Size keywords: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover