CSS Linear Gradients For Frontend Engineers

© 7 June, 2015, Martin Rinehart

General knowlege of HTML and CSS required.

At this time (7 June, 2015) CSS3 gradient specifications are at the Editors' Draft stage as part of the CSS Image Values and Replaced Content Module Level 3 specification. Caniuse reports that approximately 90% of current browsers support gradients; 80% support them without requiring prefixes. The main exceptions are older Microsoft browsers (IE 9 and earlier) and Opera Mini.

This website's "MR" logo was created with JavaScript, not CSS gradients (in 2011).

Three-Color, Angled Linear Gradient Example


Continue to the Linear Gradients page for complete details.

Three-Color, Radial Gradient Examples


Circular Radial Gradient Example



Elliptical Radial Gradient Examples


Continue to the Radial Gradients page for complete details.

All valid HTML colors may be used, including rgba() pseudo functions.

Elements with gradient backgrounds may be transformed: rotated, translated and so on.

Feedback: MartinRinehart at gmail dot com

# # #