CSS Gradients
A smooth blend between two or more colors inside an element comes from the CSS gradient functions, which you pass to the background-image property.
Three types of gradients are available:
- Linear Gradients — colors change along a line running down, up, left, right, or diagonally
- Radial Gradients — colors spread outward from a central point
- Conic Gradients — colors rotate around a center point
CSS linear-gradient() Function
Call the CSS linear-gradient() function when colors should change along a straight line, whether that line runs down, up, left, right, or diagonally.
Color stops are the colors being blended, and at least two of them are required. A direction (or an angle) and a starting point are optional additions.
Top to Bottom (default)
In this linear gradient, red sits at the top of the element and blends downward into yellow at the bottom.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Top to Bottom</title>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to bottom, red, yellow);"></div>
</body>
</html>
Bottom to Top
Reversing the direction puts red at the bottom of the element, and the blend climbs until it reaches yellow at the top.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Bottom to Top</title>
</head>
<body>
<h1>Linear Gradient - Bottom to Top</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to top, red, yellow);"></div>
</body>
</html>
Left to Right
Running sideways, this linear gradient begins with red on the left edge and reaches yellow on the right edge.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Left to Right</title>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to right, red, yellow);"></div>
</body>
</html>
Diagonal
Here the blend crosses the element diagonally, with red in the top-left corner and yellow in the bottom-right corner.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Diagonal</title>
</head>
<body>
<h1>Linear Gradient - Diagonal</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to bottom right, red, yellow);"></div>
</body>
</html>
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Using Angles
The predefined directions (to bottom, to top, to right, to left, etc.) can give way to an angle value when you need finer control over where the gradient points.
- "to top" matches 0deg
- "to right" matches 90deg
- "to bottom" matches 180deg
- "to left" matches 270deg
Example
With its angle set to 180deg, this linear gradient blends from red to yellow.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Using Angles</title>
</head>
<body>
<h1>Linear Gradient - Using Angles</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(180deg, red, yellow);"></div>
</body>
</html>
Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);
Linear Gradient - Multiple Color Stops
A linear gradient is not limited to two color stops.
Three Color Stops
Three colors run from top to bottom in this gradient: red, yellow, and green.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Multiple Color Stops</title>
</head>
<body>
<h1>Linear Gradient - Multiple Color Stops</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(red, yellow, green);"></div>
</body>
</html>
Rainbow Gradient
All the rainbow colors run from left to right here, with some text placed on top of them.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Rainbow</title>
</head>
<body>
<h1>Linear Gradient - Rainbow</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); text-align: center; line-height: 200px; color: white; font-size: 30px;">
Rainbow Background
</div>
</body>
</html>
Linear Gradient - Transparency
Fading effects are possible because CSS gradients can include transparency.
Set the color stops with the rgba() function, whose last value controls it on a scale from 0 to 1: 0 is fully transparent, and 1 is fully opaque (no transparency).
Example
Moving from left to right, this gradient begins fully transparent and ends as full red.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Transparency</title>
</head>
<body>
<h1>Linear Gradient - Transparency</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));"></div>
</body>
</html>
CSS repeating-linear-gradient() Function
To repeat a linear gradient pattern, use the CSS repeating-linear-gradient() function.
Example
Here the repeating pattern is red, then yellow at 10%, then green at 20%.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Linear Gradient</title>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad" style="height: 200px; background-image: repeating-linear-gradient(red, yellow 10%, green 20%);"></div>
</body>
</html>