Linear Gradients
You may exhibit seamless transitions between two or more specified colors with CSS gradients.
Three types of gradients are defined by CSS:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
- Conic Gradients (rotated around a center point)
CSS Linear Gradients
You need to specify at least two color stops in order to make a linear gradient. The colors you want to render smoothly transitioning between are called color stops. Along with the gradient effect, you may also define a direction (or an angle) and a beginning point.
Syntax
Direction – Top to Bottom (this is default)
A linear gradient that begins at the top is seen in the example that follows. It begins red and changes to yellow:
Example
#grad {
background-image: linear-gradient(red, yellow);
}
Direction – Left to Right
A linear gradient that begins on the left is demonstrated in the example below. It begins red and changes to yellow:
Example
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Direction – Diagonal
By indicating the horizontal and vertical beginning places, you can create a gradient that is diagonal in nature.
A linear gradient that begins at top left and travels to bottom right is displayed in the image below. It begins red and changes to yellow:
Example
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Using Angles
Instead of using the preset directions (to the bottom, top, right, left, bottom right, etc.), you can select an angle if you’d like additional control over the gradient’s direction. “To top” is the value of 0 degrees. “To right” is the equivalent of a 90 degree angle. 180 degrees is the same as “to bottom”.
Syntax
The following example shows how to use angles on linear gradients:
Example
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Using Multiple Color Stops
A linear gradient with many color stops is demonstrated in the sample below, which runs from top to bottom:
Example
#grad {
background-image: linear-gradient(red, yellow, green);
}
The example below demonstrates how to use rainbow colors and some text to make a linear gradient that runs from left to right:
Example
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Using Transparency
Transparency, which can be utilized to provide fading effects, is also supported by CSS gradients.
We define the color stops using the rgba() function in order to add transparency. The final parameter in the rgba() function defines the color’s transparency; a value of 0 denotes full transparency and a value of 1 denotes full color (no transparency).
A linear gradient that begins on the left is demonstrated in the example below. It begins completely transparent before turning completely red:
Example
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Repeating a linear-gradient
Linear gradients can be repeated using the repeating-linear-gradient() function:
Example
A repeating linear gradient:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
