Why CSS Gradient
These are the following reasons to use CSS gradient.
- You don’t have to use images to display transition effects.
- The download time and bandwidth usage can also be reduced.
- It provides better look to the element when zoomed, because the gradient is generated by the browser.
There are two types of gradient in CSS3.
- Linear gradients
- Radial gradients
1) CSS Linear Gradient
The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3 linear gradient, you must have to define two or more color stops. The color stops are the colors which are used to create a smooth transition. Starting point and direction can also be added along with the gradient effect.
background: linear-gradient (direction, color-stop1, color-stop2.....);
(i) CSS Linear Gradient: (Top to Bottom)
Top to Bottom Linear Gradient is the default linear gradient. Let’s take an example of linear gradient that starts from top. It starts red and transitions to green.
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, green); /* Standard syntax (must be last) */ } </style> </head> <body> <h3>Linear Gradient - Top to Bottom</h3> <p>This linear gradient starts at the top. It starts red, transitioning to green:</p> <div id="grad1"></div> </body> </html>
(ii) CSS Linear Gradient: (Left to Right)
The following example shows the linear gradient that starts from left and goes to right. It starts red from left side and transitioning to green.
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */ } </style> </head> <body> <h3>Linear Gradient - Left to Right</h3> <p>This linear gradient starts at the left. It starts red, transitioning to green:</p> <div id="grad1"></div> </body> </html>
(iii) CSS Linear Gradient: (Diagonal)
If you specify both the horizontal and vertical starting positions, you can make a linear gradient diagonal.
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left top, red , green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, red , green); /* Standard syntax (must be last) */ } </style> </head> <body> <h3>Linear Gradient - Diagonal</h3> <p>This linear gradient starts at top left. It starts red, transitioning to green:</p> <div id="grad1"></div> </body> </html>
2) CSS Radial Gradient
You must have to define at least two color stops to create a radial gradient. It is defined by its center.
background: radial-gradient(shape size at position, start-color, ..., last-color);
(i) CSS Radial Gradient: (Evenly Spaced Color Stops)
Evenly spaced color stops is a by default radial gradient. Its by default shape is eclipse, size is farthest- carner, and position is center.
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */ background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */ } </style> </head> <body> <h3>Radial Gradient - Evenly Spaced Color Stops</h3> <div id="grad1"></div> </body> </html>
(ii) Radial Gradient: (Differently Spaced Color Stops)
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */ background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */ } </style> </head> <body> <h3>Radial Gradient - Differently Spaced Color Stops</h3> <div id="grad1"></div> </body> </html>
