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:

  1. Linear Gradients (goes down/up/left/right/diagonally)
  2. 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>
Output:

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>
Output:

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>
Output:

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>
Output:

Linear Gradients - Using Different Angles

0deg
 
90deg
 
180deg
 
-90deg

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>
Output:

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>
Output:

Radial Gradient - Shapes

Circle