Table of contents
CSS defines two types of gradients:
CSS defines two types of gradients:
- linear gradient (down/up/left/right/diagonal);
- Radial gradient (with a center that expands around);
Format:
background-image: linear-gradient( direction/angle, color 1, color 2, color 3....);
how to use:
A linear gradient is defined like this through the attribute linear-gradient.
Case two: (horizontal) linear gradient from left. It starts in red and transitions to yellow:
background: linear-gradient(to right,#333399,#ff00cc);
Case two: (diagonal) linear gradient starting from top left (to bottom right). It starts in red and transitions to yellow:
background-image: linear-gradient(to bottom right, red, yellow)
Use transparency:
CSS gradients also support transparency and can also be used to create gradient effects.
To add transparency, we use the rgba() function to define a color scale. The last parameter in the rgba() function can be a value from 0 to 1, which defines the transparency of the color: 0 means full transparency, 1 means full color (no transparency).
Case 3: Linear gradient starting from the left. It starts out completely transparent, then transitions to full red:
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
Other directions and angles:
- to top : Fill the gradient color from bottom to top
- to right: Fill the gradient color from left to right
- to bottom: fill the gradient from top to bottom
- to left : Fill the gradient color from right to left
- 0deg : 0 degree->to top
- 90deg: 90 degrees->to right
- 180deg: 180 degrees->to bottom
- 270deg: 270 degrees->to left