CSS3 gradients show a smooth transition between two or more specified colors. CSS3 defines two types of gradients:

  • Linear Gradients – Down/up/left/right/diagonal
  • Radial Gradients – defined by their centers

Linear Gradient – top to bottom (default)

.gradual{
   background: linear-gradient(red, orange); 
}
Copy the code

Linear gradient – from left to right

.gradual{
   background: linear-gradient(to right, red, orange); 
}
Copy the code

Linear gradient – diagonal

.gradual{
   background: linear-gradient(to bottom right, red, orange); 
}
Copy the code

Linear gradient – with the specified Angle

.gradual{
   background: linear-gradient(60deg, red, orange); 
}
Copy the code

Linear gradient – from top to bottom, with multiple color nodes

.gradual{
   background: linear-gradient(red, orange, yellow); 
}
Copy the code

Linear gradient – with rainbow colors

.gradual{
   background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); 
}
Copy the code

Linear gradient – with transparency

The gradual {background: linear - gradient (rgba (255,0,0,1), rgba (255,0,0,0)); }Copy the code

Repeat the linear gradient-repeating-linear-gradient () function

.gradual{
   background: repeating-linear-gradient(red, orange, yellow 10%); 
}
Copy the code

Radial gradient – Evenly distributed color nodes (default)

.gradual{
   background: radial-gradient(red, orange, yellow); 
}
Copy the code

Radial gradient – color nodes are not evenly distributed

.gradual{
   background: radial-gradient(red 5%, orange 20%, yellow 80%); 
}
Copy the code

Repeat the radial gradient – repeating-radial-gradient() function

.gradual{
   background: repeating-radial-gradient(red, orange, yellow 10%); 
}
Copy the code