CSS gradients enable the rendering of seamless transitions between two or more designated colors.
CSS categorizes gradients into three types:
To generate a linear gradient, it’s necessary to specify a minimum of two color stops, representing the colors intended for seamless transitions. Additionally, you can designate a starting point and direction (or angle) to apply the gradient effect.
| background-image: linear-gradient(direction, color-stop1, color-stop2, …); |
Direction – Top to Bottom (this is default)
Below is an example illustrating a linear gradient that originates from the top, commencing with red and transitioning smoothly into yellow:
Example
| #grad { background-image: linear-gradient(red, yellow); } |
Direction – Left to Right
Below is an example demonstrating a linear gradient that begins from the left side, transitioning from red to yellow:
Example
| #grad { background-image: linear-gradient(to right, red , yellow); } |
Direction – Diagonal
By specifying both horizontal and vertical starting positions, you can create a diagonal gradient.
The following example illustrates a linear gradient starting from the top-left corner and extending to the bottom-right corner, transitioning from red to yellow:
Example
| #grad { background-image: linear-gradient(to bottom right, red, yellow); } |
For greater control over the gradient’s direction, you can specify an angle rather than relying on predefined directions (such as “to bottom”, “to top”, “to right”, “to left”, “to bottom right”, etc.).
A 0deg angle corresponds to “to top”, 90deg to “to right”, and 180deg to “to bottom”, allowing precise adjustment of the gradient’s orientation.
| background-image: linear-gradient(angle, color-stop1, color-stop2); |
Here’s an example illustrating the application of angles in linear gradients:
Example
| #grad { background-image: linear-gradient(180deg, red, yellow); } |
Below is an example demonstrating a linear gradient with multiple color stops, transitioning from top to bottom:
Example
| #grad { background-image: linear-gradient(red, yellow, green); } |
Here’s an example illustrating the creation of a linear gradient from left to right, featuring colors of the rainbow alongside some text:
Example
| #grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } |
CSS gradients facilitate the integration of transparency, enabling the creation of fading effects.
To incorporate transparency, the rgba() function is employed to define the color stops. The final parameter within the rgba() function, ranging from 0 to 1, determines the transparency level: 0 represents full transparency, while 1 signifies full color (no transparency).
The following example illustrates a linear gradient starting from the left, transitioning from full transparency to full-color red:
Example
|
#grad { |
The repeating-linear-gradient() function is employed to repeat linear gradient patterns.
Example
A linear gradient that repeats.
| #grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); } |
