CSS Color Gradients

1. Introduction

This document proposes a new feature in CSS for creating color gradients. These gradients define an additional <color> value type for the CSS3 Color specification; as such, they can be used in place of a traditional color anywhere in CSS, e.g. as a background color gradient, a text color gradient, or a border color gradient.

The proposals are based on the SVG specification. However, CSS color gradients could style any markup element, including HTML.

2. color-gradient-linear

Linear color gradients are created using the color-gradient-linear color value, which takes several parameters:
color-gradient-linear(angle, offset1 color1, offset2 color2, ... , spreadmethod)

angle indicates the angle of the gradient from horizontal, moving clockwise so that an angle of 0 deg creates a gradient from left to right, and 90 deg creates a gradient from top to bottom.

At least one offset & color pair must then follow. offset indicates where to start the gradient, and can take any length unit. Draw a line through the containing element, following the gradient angle; offset takes the values 0% and 100% where the line hits the element's inside border.

For example, if angle=0deg, then an offset of 0% indicates the gradient starts at the left hand border. If angle=90deg, then an offset of 100% indicates the bottom border.

color can be any valid CSS3 color value, including rgba and hsla values that enable opacity.

The spreadmethod parameter, which is not required, can take three values - "pad | reflect | repeat". This indicates what happens if the gradient starts or ends inside the bounds of the target element. Possible values are: pad, which says to use the terminal colors of the gradient to fill the remainder of the target region, reflect, which says to reflect the gradient pattern start-to-end, end-to-start, start-to-end, etc. continuously until the target element is filled, and repeat, which says to repeat the gradient pattern start-to-end, start-to-end, start-to-end, etc. continuously until the target region is filled. The default value is "pad".

Examples:

    /*linear gradient from green to blue, moving left to right*/
em { color: color-gradient-linear(0deg, 5% green, 95% blue) } 
    /*linear gradient from a transparent red to solid purple, top to bottom*/
em { color: color-gradient-linear(90deg, 5px rgba(100,100,100, 0.5), 200px purple) }
    /*linear gradient from green to blue to yellow, right to left*/
em { color: color-gradient-linear(180deg, 3px green, 50% blue, 100% yellow) }
    /*linear gradient from green to blue to green to blue ..., left to right*/
em { color: color-gradient-linear(0deg, 0px green, 10px blue, reflect) }

3. color-gradient-radial

Radial color gradients are created using the color-gradient-radial color value, which takes several parameters:
color-gradient-radial(center-x center-y, radius1 color1, radius2 color2, ... , spreadmethod)

center-x and center-y indicate the center of the radial gradient, offset from the top left corner of the element.

At least one radius & color pair must then follow. radius indicates where to start the gradient; it must be a positive length value, starting from the center of the circle. A value of 100% for radius indicates that the gradient is equal in length with the element's width.

The spreadmethod parameter works exactly as for color-gradient-linear.

Examples:

    /*radial gradient from green to blue, center outwards, starting at the element's center*/
em { background-color: color-gradient-radial(50% 50%, 0px green, 50px blue) } 
    /*radial gradient from a transparent red to solid purple, center outwards, starting top left*/
em { background-color: color-gradient-radial(0px 0px, 5px rgba(100,100,100, 0.5), 200px purple) }
    /*radial gradient from green to blue five times, center outwards, starting at the element's center*/
em { background-color: color-gradient-radial(50% 50%, 0px green, 20% blue, reflect)