Categories
CSS Web development

CSS Gradients

Background gradients can look very good on the web page. CSS gradients allow you to display smooth transitions between the colours.

CSS Gradients

There are two types of gradients in CSS:

  1. Linear Gradients (goes down/up/left/right/diagonally)
  2. Radial Gradients (defined by their center)

Linear Gradients

Let’s start with 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: 100px;
  background-color: #e9c46a; 
  background-image: linear-gradient(#e9c46a, #2a9d8f); 
}
</style>
</head>
<body>

<div id="gradient"></div>

</body>
</html>

Output:

Example2:

Linear Gradient – Left to Right

<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
  height: 100px;
  background-color: #e9c46a; 
  background-image: linear-gradient(to right, #e9c46a , #2a9d8f); 
}
</style>
</head>
<body>

<div id="gradient"></div>

</body>
</html>

Output:

Example 3:

Using Multiple Color Stops

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
  height: 100px;
  background-color: #e9c46a; 
  background-image: linear-gradient(#e9c46a, #f4a261, #e76f51); 
}

#gradient2 {
  height: 100px;
  background-color: #e9c46a; 
  background-image: linear-gradient(#e9c46a, #f4a261, #e76f51, #2a9d8f, #264653); 
}

#gradient3 {
  height: 100px;
  background-color: #e9c46a; 
  background-image: linear-gradient(#e9c46a 10%, #f4a261 85%, #e76f51 90%); 
}
</style>
</head>
<body>

<h5>3 Color Stops (evenly spaced):</h5>
<div id="gradient1"></div>

<h5>3 Color Stops (not evenly spaced):</h5>
<div id="gradient3"></div>

<h5>5 Color Stops (evenly spaced):</h5>
<div id="gradient2"></div>

</body>
</html>

Output:

3 Color Stops (evenly spaced):


3 Color Stops (not evenly spaced):


5 Color Stops (evenly spaced):

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

<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
  height: 100px;
  background-image: linear-gradient(to right, rgba(42,157,143,0), rgba(42,157, 143,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, the shape is an ellipse, the size is farthest-corner, and the position is center.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
  height: 200px;
  width: 200px;
  background-color: #e9c46a; 
  background-image: radial-gradient(#e9c46a, #f4a261, #e76f51); 
}
</style>
</head>
<body>

<div id="gradient"></div>

</body>
</html>

Output:

Note: Color stops are automatically spaced evenly when no percents are specified.

Example 2.

<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
  height: 200px;
  width: 250px;
  background-color: #e9c46a; 
  background-image: radial-gradient(#e9c46a, #f4a261, #e76f51); 
}

#gradient2 {
  height: 200px;
  width: 250px;
  background-color: #e9c46a; 
  background-image: radial-gradient(circle, #e9c46a, #f4a261, #e76f51); 
}
</style>
</head>
<body>

<p>Ellipse(default):</p>
<div id="gradient1"></div>

<p>Circle:p</p>
<div id="gradient2"></div>

</body>
</html>

Output:

Ellipse(default):


Circle:

Enjoy coding!