CSS Gradients

Gradient Background

CSS gradients allow you to display a smooth transition between two or more specified colors.

CSS defines two types of gradients:

  • Linear Gradient(Down/Up/Left/Right/Diagonal)
  • Radial Gradient(Defined by its center)

CSS Linear Gradient

To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to present with a smooth transition. You can also set the starting point and direction (or angle) as well as the gradient effect.

Syntax

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

Linear Gradient - Top to Bottom (Default)

The following example shows a linear gradient starting from the top. It begins with red and transitions to yellow:

From top to bottom (default)}

Example

#grad {
  background-image: linear-gradient(red, yellow);
}

Try It Yourself

Linear Gradient - From left to right

The following example shows a linear gradient starting from the left. It starts with red and transitions to yellow:

From left to right

Example

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Try It Yourself

Linear Gradient - Diagonal

You can achieve diagonal gradients by specifying the horizontal and vertical starting positions.

The following example shows a linear gradient starting from the top-left corner (to the bottom-right corner). It starts with red and transitions to yellow:

Top-left to bottom-right

Example

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Try It Yourself

Using Angle

If you want to have more control over the gradient angle, you can define an angle to replace the predefined directions (down, up, right, left, bottom-right, etc.). The value 0deg is equal to up (to top). The value 90deg is equal to right (to right). The value 180deg is equal to down (to bottom).

180deg

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

This angle specifies the angle between the horizontal line and the gradient line.

The following example shows how to use an angle on a linear gradient:

Example

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Try It Yourself

Using Multiple Color Stops

The following example shows a linear gradient with multiple color stops (from top to bottom):

Example

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Try It Yourself

The following example shows how to create a linear gradient (from left to right) using rainbow colors and some text:

Gradient Background

Example

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Try It Yourself

Using Transparency

CSS gradients also support transparency and can be used to create gradient effects.

To add transparency, we use the rgba() function to define the color stop. The last parameter of the rgba() function can be a value between 0 and 1, which defines the transparency of the color: 0 represents fully transparent, and 1 represents fully colored (no transparency).

The following example shows a linear gradient starting from the left. It starts completely transparent and then transitions to full red:

Example

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Try It Yourself

Repeating Linear Gradient

repeating-linear-gradient() Function for Repeating Linear Gradient:

Example

Repeating Linear Gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Try It Yourself