I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Linear Gradients

css / gradients

Estimated reading time: 2 minutes, 30 seconds

Screenshot of fixed-width design with gradients and multiple background imagesModern browsers (Firefox 3.6+, Safari 4+, all versions of Chrome, Opera 10+ and IE 10) support gradients in . The syntax for gradients has seen many iterations, improvements and variations since it was first proposed by Apple in 2008; this article focuses on the final unprefixed specification for linear gradients, which is supported in Firefox 15 and IE10 (at least as of this writing). Older browsers will require prefixed values and variations on the syntax, or an solution; I suggest using one of the gradient generators at the end of this article to create the full range of values to support all browsers.

At its most basic, the syntax for a linear gradient is very simple:

body { background-image: linear-gradient(#a00, black); }

Linear gradients have just two required values: starting color and ending color. By default, the gradient direction is top-to-bottom, but may be specified as a keyword (top, left, bottom, right), a pair of keywords representing a corner (bottom right, for example) or an angle. If keywords are used, they must be preceded by to; angles are specified in the same way as CSS transforms, as bearing directions (i.e. 0deg is north, or the 12 o'clock position, with angles growing to the right (clockwise)).

The color values may be specified in any method supported by CSS: keywords, hexadecimals, rgb, rgba, or hsl values.

While gradients are technically images, and should be applicable anywhere images are used on a web page, most browsers currently support the use of gradients only in backgrounds, so it is that use that I’ll show here.

body { background-image: linear-gradient(45deg, #a00, black); }

By default, colors are equally distributed along the gradient – in this case, red at the starting position (0%), black at the end (100%). If we add intermediary colors, they will be evenly distributed along this continium. If we want to add stops – for example, to have black start from the ⅓rd point, do the following:

body { background-image: linear-gradient(#a00, black 33%); }

You can add as many colors as you wish into this gradient, each with their own individual stops – in fact, you could copy them directly from ’s gradient tool. Examples of pop art backgrounds with CSS3As they are treated as just another image, it's entirely possible to combine gradients with background images, as shown in the Pop Art CSS3 Backgrounds article.

Note that gradients will automatically extend the complete height and width of the element, although the actual computed height of the element is often different from its percieved “visual” height. Visual misapplication of gradients is often due to not having the element sized correctly: this is especially true in the body, which often needs a min-height: 100% or min-height: 100vh declaration in order to have the gradient extend fully to the bottom of the browser window.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.