Categories
CSS Web development

CSS Gradients

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:

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

Leave a Reply