CSS Gradients

Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Notation of CSS gradients in browsers was changed several times. We hope that today's notation for CSS Gradients already remains unchanged. On the other hand, the signature of CSS Gradient methods are from the perspective of a programmer terrible.

The gradient method is defined as the value of the background-image.

We can use:

• Linear gradients
• Radial gradients
• Repeating Gradients

You can look at support of CSS Gradients in your browser:

• CSS3 online test

Linear Gradient

/**

* Draw linear gradient

* @param {String=} direction - (“to ” + ( top | right | bottom | left ) | number + ( ‘deg’ | ‘rad’ ))

* @param {...String} color - color | color + stop-color

*/

linear-gradient( direction, color_1, color_2, color_n)

Stop-color is the border, where the previous color ends and the new color begins.

Direction

• top: 0
• right: 90deg
• bottom: 180deg
• left: 270deg

Radial gradient

/**

* Draw radial gradient

* @param {String=} shape_direction - (ellipse | circle) | (ellipse | circle) + ‘at ’ + ( top | right | bottom | left )

* @param {...String} color - color | color + stop-color

*/

radial-gradient( shape_direction, color_1, color_2, color_n)

Repeating Gradient

• repeating-linear-gradient
• repeating-radial-gradient

The size of the gradient is determined by the final stop-color.

Reference

• W3c Specification