Background gradients can look very good on the web page. CSS gradients allow you display smooth transitions between the colours.
There are two types of gradients in CSS:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
Linear Gradients
Let’s start from linear gradients. A Linear gradient is the most commonly used. It’s called “linear” because the colors flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);Example1:
Linear Gradient – Top to Bottom (default):
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 200px;
background-color: lightblue;
background-image: linear-gradient(lightblue, lightpink);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts at the top. It starts lightblue, transitioning to lightpink:</p>
<div id="gradient"></div>
</body>
</html>Output:
Example2:
Linear Gradient – Left to Right
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 200px;
background-color: lightblue;
background-image: linear-gradient(to right, lightblue , lightpink);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts at the left. It starts lightblue, transitioning to lightpink</p>
<div id="gradient"></div>
</body>
</html>Output:
Example 3:
Using Multiple Color Stops
<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 200px;
background-color: lightblue;
background-image: linear-gradient(lightblue, lightpink, red);
}
#gradient2 {
height: 200px;
background-color: blue;
background-image: linear-gradient(blue, red, lightpink, lightgreen, green, yellow, orange);
}
#gradient3 {
height: 200px;
background-color: blue;
background-image: linear-gradient(blue 10%, yellow 85%, orange 90%);
}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<h3>3 Color Stops (evenly spaced):</h3>
<div id="gradient1"></div>
<h3>7 Color Stops (evenly spaced):</h3>
<div id="gradient2"></div>
<h3>3 Color Stops (not evenly spaced):</h3>
<div id="gradient3"></div>
</body>
</html>
Output:
Note: Color stops are automatically spaced evenly when no percents are specified.
Example 4:
Using Transparency
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color grey:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 200px;
background-image: linear-gradient(to right, rgba(192,192,192,0), rgba(192,192,192,1));
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
Output:
Radial Gradients
The radial-gradient function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse.
A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);By default, shape is ellipse, size is farthest-corner, and position is center.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 350px;
width: 400px;
background-color: lightblue;
background-image: radial-gradient(lightblue, lightpink, red);
}
</style>
</head>
<body>
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>
<div id="gradient"></div>
</body>
</html>
Output:
Example 2.
<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 200px;
width: 250px;
background-color: blue;
background-image: radial-gradient(blue, red, gray);
}
#gradient2 {
height: 200px;
width: 250px;
background-color: blue;
background-image: radial-gradient(circle, blue, red, gray);
}
</style>
</head>
<body>
<h1>Radial Gradient - Shapes</h1>
<h2>Ellipse (this is default):</h2>
<div id="gradient1"></div>
<h2><strong>Circle:</strong></h2>
<div id="gradient2"></div>
</body>
</html>Output:
Recently I used the CSS linear-gradient in one of my animations. Visit lenastanley.com to see the animation.
Enjoy coding!