Gradients

Gradients are smooth transitions between two or more specified colors. When creating gradients, we can specify multiple color values in-between, called color stops. Each color stop is made up of a color and a position. The gradient block fades the color from each stop to the next to create a smooth gradient.

CSS3 has the ability to create radial and linear gradients, as well as multiple background images on any element.

There are two types of gradients currently available in CSS3:

linear gradient
radial gradient

Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis.

Linear gradients

The basic syntax for linear gradients:

snippet

background-image: linear-gradient(<direction>, <color stops>.....); 
 
/*Adding multiple color stops*/ 
background-image: linear-gradient(<direction>, <color stop-1>, <color stop-2>.....<color stop-n>);

Values	Description
<direction>	It is the (angle) along which the gradient should proceed, or the (side) or (corner) from which it should start.
angles	The values are in degrees (deg). 0deg points to the right, 90deg is up, and so on counter clockwise.
side or corner	Use the top, bottom, left, and right keywords.
<color stops>	It is the color and a percentage or length specifying how far along the gradient that stop is located.

Example

snippet

background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%); 
background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%); 
background-image: -moz-linear-gradient(#FFF 0%, #000 100%);

Defaults

default direction - top is the default in the absence of a specified direction. default color stop% - The first color stop is assumed to be at 0%, and the last color stop is assumed to be at 100%,

Example

snippet

background-image: -moz-linear-gradient(#FFF, #000);

Adding additional color stop 75% along the way

snippet

background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);

Starting color stop at 50%

snippet

background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);

Radial Gradients

Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.

A simple circular gradient to illustrate the standard syntax:

snippet

background-image: -moz-radial-gradient(<background-position>, <shape & size>, <start color>, <end color>);

Values	Description
<background-position>	position for the center of the gradient.You can use values, percentages, or keywords to set the gradient’s position
<shape & size>	shape and size of the gradient
<start color>
<end color>

All the results of the below three are identical.

snippet

background-image: -moz-radial-gradient(#FFF, #000); 
background-image: -moz-radial-gradient(center, #FFF, #000); 
background-image: -moz-radial-gradient(center, ellipse cover, #FFF, #000);

Values	Description
<shape>	The shape can take one of two values, circle or ellipse, with the latter being the default.
<size>	You can use one of the following values: (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover)
closest-side	The gradient’s shape meets the side of the box closest to its center (for circles), or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner	The gradient’s shape is sized so it meets exactly the closest corner of the box from its center.
farthest-side	Similar to closest-side, except that the shape is sized to meet the side of the box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses).
farthest-corner	The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center.
contain	A synonym for closest-side.
cover	A synonym for farthest-corner.

Example

snippet

background-image: -moz-radial-gradient(30px 30px, circle farthest-side, #FFF, #000 30%, #FFF);

Positioning the Gradient

snippet

background-image: -moz-radial-gradient(30px 30px, #FFF, #000);

It will place the center of the gradient

- 30 pixels from the top - 30 pixels from the left of the element

Repeating Gradients

If we want to create a gradient "pattern" that repeats over the background of an element. But linear-repeating gradients can be created by repeating the background image (with background-repeat), but there's no equivalent way to easily create repeating radial gradients.

CSS3 comes with both a repeating-linear-gradient and a repeating-radial-gradient syntax which makes easier. Gradients with repeating-linear-gradient and repeating-radial-gradient have the same syntax as the nonrepeating versions.

snippet

.repeat_linear_1 { 
     background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%,  
                            rgba(0,0,0,0.1) 30%); 
} 
 .repeat_radial_2 { 
     background-image: -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9),  
                            rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); 
} 
 .multiple_gradients_3 { 
     background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%),  
                        -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9),  
                            rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); 
}