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:

  1. linear gradient
  2. 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>);
ValuesDescription
<direction>It is the (angle) along which the gradient should proceed, or the (side) or (corner) from which it should start.
anglesThe values are in degrees (deg). 0deg points to the right, 90deg is up, and so on counter clockwise.
side or cornerUse 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>);
ValuesDescription
<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);
ValuesDescription
<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-sideThe 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-cornerThe gradient’s shape is sized so it meets exactly the closest corner of the box from its center.
farthest-sideSimilar 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-cornerThe gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center.
containA synonym for closest-side.
coverA 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%); 
}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents