Post
Ask Question

CSS3 Series Part 5: Playing With Gradients

Introduction

 
I strongly recommend reading the following previous parts. Gradients are the fantastic feature provided by CSS3 with which we can mix 2 or more colors to create a background for any element as shown above.
 
CSS3 defines the following 2 types of gradients:
  1. Linear Gradients.
  2. Radial Gradient.
Let's discuss both with examples.
 

Linear Gradient

 
A Linear gradient mixes colors up, down, left and right. To create a linear gradient, we must define at least 2 colors. The default gradient is Top to Bottom.
 
So, let's create a simple linear gradient with Red and Blue.
  1. .simpleGradient    
  2. {    
  3.    height:200px;    
  4.    width:400px;    
  5.    background: -moz-linear-gradient(red,blue);    
  6. }   
 
As you can see, because of its default behavior a linear gradient is created top to bottom. If you want to change its default behavior and want to mix colors from left to right, just add left or right as the first parameter in gradient() as shown below.
  1. .simpleGradient    
  2. {    
  3.    height:200px;    
  4.    width:400px;    
  5.    background: -moz-linear-gradient(left,red,blue);    
  6. } 
 
You can also add more than 2 colors to create your background. You just need to continue adding colors in gradient(). For example, if we want to add Red, Blue, Green, and Yellow then we just need to specify the color names in the function as shown below.
  1. .simpleGradient    
  2. {    
  3.    height:200px;    
  4.    width:400px;    
  5.    background: -moz-linear-gradient(left,red,blue,green,yellow);    
  6. }   
 
If you want to add 2 colors and want to repeat that color only for your background then you can use the "repeating-linear-gradient" property as shown below.
  1. .repeatGradient    
  2. {    
  3.    height:200px;    
  4.    width:400px;    
  5.    background: -moz-repeating-linear-gradient(right,red,green 20%,yellow 20%);    
  6. }  
 

Radial Gradient

 
Radial gradients are defined by their center and can be created by adding at least 2 colors. the syntax for "radial-gradient" is as follows:
 
Background: radial-gradient ([Center of gradient], [Shape], [Size], [starting color], [stopping color], [stop position], [Last color stop]);
 
Let's look at a simple radial-gradient example.
  1. .radialGradient    
  2. {    
  3.    background: -moz-radial-gradient(yellow, red, green);    
  4. }  
As you can see in the preceding code, we're creating a radial gradient with 3 colors, in this Yellow will be the center of the background, in other words, the first color, the second with Red and it will end with Green. The default shape for a radial gradient is Ellipse. The following is the sample.
 
 
If you want to change the shape to a circle and you want to add colors with a specific amount, the following is the code and sample output.
  1. .circleRadialGradient    
  2. {    
  3.    background: -moz-radial-gradient(circle,yellow 10%, orange 15%, #80E6FF 70%);    
  4. }   
In the preceding code, we're creating a circle background with Yellow centered with Orange color and Blue with a specific amount via percentage. If you look at the output, it looks like a hot Sun in the sky.
 
 
Isn't it's nice?
 
As for a Linear Gradient, we can also create a repeating radial gradient. For this, we can use the "repeating-radial-gradient" property.
 
The following is an example of the output.
  1. .repeatingCircleRadialGradient    
  2. {    
  3.    background: -moz-repeating-radial-gradient(circle, #ff6a00, red, black,white, orange 20%, #80E6FF 70%);    
  4. }  
 
So this article was based on background gradient. You can play by creating a gradient with different colors and styles.
 
In this article, we've seen what a gradient is, what are their type, how to create a linear and radial gradient using 2 and more than 2 colors.
 
From the next article onwards in this series, we're going to learn the most advanced and interesting parts of CSS3, 2D and 3D transformations. Until then keep learning and keep sharing.
 
If there's any mistake in this article then please let me know. Please provide your valuable feedback and comments that enable me to provide a better article the next time.


Similar Articles