Major Changes to CSS Gradients

One of the easiest and most effective ways of speeding up a web site is to replace background images with CSS3.

A linear gradient defines a color change along a specified line. Each point on the line has a particular color. The width of the line, perpendicular to the direction of the line, extends to the edges of the gradient’s container. You can use a linear gradient to fill any two-dimensional shape. By default, a linear gradient changes colors from top to bottom.

Changes to Gradients
1. Below is a summary of the major changes to CSS gradients over the past year:
Angles in linear-gradient() changed from polar angles to bearing angles (compass directions). 0° now points up (bottom-to-top), and angles increase clockwise. See Angles in Gradients for the feedback that informed this decision.

2. Keyword directions in linear-gradient() changed from bare directional keywords (top, right, bottom, left) indicating the starting point to to ‹keyword› where the keyword indicates the endpoint. (to bottom, to left, to bottom, to left). This change was made because Tab felt having 0deg mean bottom-to-top made the fact that top meant top-to-bottom confusing. The WG was split but mostly ambivalent on whether this was necessary, or whether from ‹keyword› was a better alternative; the resolution landed on to ‹keyword›.

3. Corner-to-corner linear-gradient() has been redefined so that instead of aligning the gradient line to the diagonal, the central color occupies the other diagonal. See Behnam Esfabad’s post for a demonstration showing the old and new (“magic”) versions.

4. Syntax of radial-gradient() has been changed to (roughly) radial-gradient( [ ‹size› || ‹shape› ] [ at ‹position› ]?, ‹color-stop-list› ): specifically, the shape/size and position parameters are collapsed into the first argument using CSS property value conventions, allowing either or both to be specified. Position is distinguished from size by the preceding at keyword. See Radial Gradient Readability for some of the thinking that went into this change.

Thanks to CSS.info for the great detail!

body {
background:
url(img.png) no-repeat 50% 300px,
linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
}

.verticalStripes {
background-color: gray;
background-size: 50px;
background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
}

.verticalStripes {
background-color: #99d0d4;
background-size: 10px;
background-image: -webkit-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 90%, rgba(255, 255, 255, 0.25) 50%);
background-image: -ms-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
background-image: -o-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
}