Home >>CSS Tutorial >CSS Gradient
CSS Gradient
CSS Gradient
The CSS gradient displays the smooth transition combination of two or more specified colors.
Why CSS Gradient
The reasons to use CSS gradient.
- The gradient color is generated by browser so, it provides better effect to the element.
- For transition effect in your browser you don’t have need to use image.
- It can reduced the download time of any type of images.
CSS defines two types of gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
CSS Linear Gradients
You must need to define at least two color stops to create a linear gradient. You can add effects in CSS gradient color like the color goes up/down/right/left and diagonally. To create the smooth transition you need the color stops. You can also added a starting point and an angle along with the gradient effect.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Top to Bottom
This is default. This example shows the color top to bottom in gradient. It started pink and transition to purple.
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 200px;
background-color:#f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(#f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>It starts pink, transitioning to purple.</p>
<div id="grad"></div>
</body>
</html>
Linear Gradient - Top to Bottom
It starts pink, transitioning to purple.
Linear Gradient - Left to Right
The linear gradient that starts from the left. It starts pink, transitioning to purple.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color:#f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, #f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradient - left to right</h1>
<p>It starts pink, transitioning to purple.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient - left to right
It starts pink, transitioning to purple.
Linear Gradient - Diagonal
By using the linear gradient- diagonal you can specify both the horizontal and vertical starting positions. It starts with the top left and goes to bottom right. It starts pink, transition to purple.
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 200px;
background-color:#f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradient - diagonal</h1>
<p>It starts pink, transitioning to purple.</p>
<div id="grad"></div>
</body>
</html>
Linear Gradient - diagonal
It starts pink, transitioning to purple.
CSS Radial Gradients
You can use CSS gradient color to control over the direction of the gradient. Instead of using predefined directions to bottom, to top, to right, to left, etc. you can use angle, it defines by its center. You need to define two color stops to create radial gradient.
Syntax:
background-image: linear-gradient(angle, color-stop1, color-stop2);
<!DOCTYPE html>
<html>
<head>
<style>
#gr1 {
height: 100px;
background-color: #f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(0deg, #f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
#gr2 {
height: 100px;
background-color: #f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(90deg, #f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
#gr3 {
height: 100px;
background-color: #f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(180deg, #f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
#gr4 {
height: 100px;
background-color: #f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, #f041d8, #cc7cf7); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradients - Using Different Angles</h1>
<div id="gr1" style="text-align:center;">0deg</div><br>
<div id="gr2" style="text-align:center;">90deg</div><br>
<div id="gr3" style="text-align:center;">180deg</div><br>
<div id="gr4" style="text-align:center;">-90deg</div>
</body>
</html>
Linear Gradients - Using Different Angles
Using Multiple Color Stops
Let's take an example of gradient with multiple color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: #f041d8; /* For browsers that do not support gradients */
background-image: linear-gradient(#f041d8, #cc7cf7, #78c9f5); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<div id="grad1"></div>
</body>
</html>
Linear Gradients - Multiple Color Stops
Set Shape
You can also set the shape using radial gradient. It defines the shape by using shape parameter.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: #f041d8; /* For browsers that do not support gradients */
background-image: radial-gradient(circle, #f041d8, #cc7cf7, #78c9f5); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Radial Gradient - Shapes</h1>
<h2><strong>Circle:</strong></h2>
<div id="grad1"></div>
</body>
</html>