catalogs
CSS defines two types of gradients:
CSS defines two types of gradients:
- Linear gradient (down/up/left/right/diagonal);
- Radial gradient (with center spreading out to the surroundings);
Format:
background-image: linear-gradient( direction/angle , color1, color2, color3 ….) ;
How to use:
A linear gradient is defined this way by the attribute linear-gradient.
Case II: (level)A linear gradient starting from the left. It starts in red and transitions to yellow:
background: linear-gradient(to right,#333399,#ff00cc);
Case two: (diagonal)A linear gradient starting from the top left corner (to the bottom right corner). It starts in red and transitions to yellow:
background-image: linear-gradient(to bottom right, red, yellow)
Use transparency:
CSS gradients also support transparency, which can also be used to create gradient effects.
To add transparency, we use the rgba() function to define the color scale. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 means full transparency, 1 means full color (no transparency).
Case 3: A linear gradient starting from the left. It starts completely transparent and then transitions to a full color 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 gradient color from left to right.
- to bottom:fill gradient from top to bottom
- to left :Fill the gradient color from right to left.
- 0deg: 0 degrees ->to top
- 90deg: 90 degrees ->to right
- 180deg:180 degrees ->to bottom
- 270deg:270 degrees ->to left