How to work with gradients in CSS3

How to work with gradients in CSS3

CSS3 gradients are used to display smooth transitions between two or more colors. Images were used earlier to display effects, but now in CSS3 we can use gradients. Gradients  save bandwidth and load time. In a previous tutorial you learned about CSS3 Pseudo classes. In this tutorial we are going to learn how to work with gradients in CSS3. Gradients can be used with background property. All modern browsers support gradients.


CSS3 provide two types of gradients.

  1. Linear Gradient

  2. Radial Gradient

Linear Gradients in CSS3

To create a linear gradient, you have to define at least two color stops. Color stops are the colors that we want to transition.

Syntax of Linear Gradient

background: linear-gradient(direction, color-stop1, color-stop2, ...);

We define a direction and color stops with comma separated values.

Linear Gradient – Top to bottom

Consider the HTML page below.

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
      height: 200px;
      width: 200px;

   .gradient {
      background: linear-gradient(red, yellow); /* Standard syntax */
  <div class = "gradient"></div>

You can also provide direction of gradient, by default it is top to bottom.

.gradient {
      background: linear-gradient(red, yellow); /* Standard syntax */

gredients in css3

Linear Gradient – Left to Right

Gradients can be from left to right, so we use to right.

background: linear-gradient(to right,red, yellow); /* Standard syntax */


gradients in css3

Using Angles in linear gradients in CSS3

Angles can also be used in a linear gradient. Instead of using directions like to bottom, to top, to right, to left, to bottom right. Consider the code below.

background: linear-gradient(angle, color-stop1, color-stop2);
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */

This code generates a linear gradient in -90 degree angle.

Linear Gradient with multiple color stops

Multiple colors can be added as color stops in a linear-gradient. Below is a linear gradient  from left to right with multiple color specified.

background: linear-gradient(to right, red, green, blue, yellow, magenta, black); /* Standard syntax */

gradients in css3

Transparent Linear Gradient

To add transparency to a gradient we can use rgba function for color stops and provide a value for transparency. Transparency value can be from 0 to 1.

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

Above is a left to right gradient with rgba colors and transparency as well.

Repeating Linear Gradients in CSS3

To repeat linear gradient, repeating linear gradient can also be used.

background: repeating-linear-gradient(red, blue 20%, green 30%, yellow 10%);

gradients in css3


Redial gradients in CSS3

Radial gradients are defined by their center. A radial gradient have two color stops at least.

background: radial-gradient(shape size at position, start-color, ..., last-color);

By default, ellipse is used as a shape in a radial gradient, farthest-corner is the size, and center is position of a radial gradient.

gradients in css3

By default all colors will be evenly spaced but you can give different color spaces as well.

background: radial-gradient(red 5%, yellow 15%, green 60%);

gradients in css3

Shapes in radial gradient

By default a radial gradient has a shape ellipse, but it can be circle or ellipse.

background: radial-gradient(circle, red, yellow, green);

We can use different sizes for radial gradient. you can use closest-side, farthest-side, closest-corner or farthest-corner.

 background: radial-gradient(closest-side at 60% 55%, red, yellow, black);

Repeating radial gradients in CSS3

To repeat a radial gradient you can use repeating-radial-gradient().

background: repeating-radial-gradient(red, yellow 10%, green 15%);

gradients in css3

You can see the repeating linear gradient above with red, yellow and green color stops.


In this tutorial we learned about gradients in CSS3 and two types of gradients one is linear gradients and radial gradients. you can learn more about gradients from Mozilla Developer Network.

Please leave your feedback and comments below. Follow us on Twitter and follow us on Facebook to get notified about upcoming tutorials.








Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.