Skip to main content

CSS Gradients

CSS gradients allow you to create smooth transitions between two or more colors. You can use them as backgrounds, borders, or even for text effects.

There are two types of gradients in CSS:

Linear gradients​

These gradients create a smooth transition between two or more colors in a straight line.

The syntax of linear gradient:

/* Syntax for linear gradient */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

As an example:

Editor

Loading...

In the above example:

  • A linear gradient is created from top to bottom, with #ff0000 at the top and #0000ff at the bottom.
  • You can change the direction of the gradient by changing the to value, or by specifying an angle in degrees.

Radial gradients​

These gradients create a smooth transition between two or more colors in a circular or elliptical shape.

The syntax of radial gradients:

/* Syntax for radial gradient */
background-image: radial-gradient(
  shape size at position,
  start-color,
  ...,
  last-color
);

As an example:

Editor

Loading...

In the above example:

  • A radial gradient is created in the shape of a circle at the center of the div, with #ff0000 at the center and #0000ff at the edge of the circle.

You can also add color stops to gradients, which define where the transition between two colors occurs.

As an example:

/* Example with color stops */
div {
  background-image: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ffff00 50%,
    #0000ff 100%
  );
}

In the above example:

  • The gradient goes from red to yellow to blue, with the color stops at 0%, 50%, and 100%.
  • You can also use rgb(), rgba(), hsl(), or hsla() values for your color stops.

CSS Conic Gradients​

CSS conic gradients allow you to create circular color transitions that rotate around a center point. This type of gradient is particularly useful for creating pie charts, gauges, and other circular visualizations.

The syntax of conic gradients

/* Syntax */
background: conic-gradient(
  start-angle,
  color-stop1 position,
  color-stop2 position,
  ...
);

The start-angle parameter specifies the angle at which the gradient should start, and can be expressed as a degree or a keyword value (from, to, or at [x] [y]).

As an example:

Editor

Loading...

In the above example:

  • The gradient starts at the default value of from, and goes from red to blue in a clockwise direction.

You can also use multiple color stops with conic gradients:

Editor

Loading...

In the above example:

  • The gradient starts at 0 degrees (at the top of the circle), and goes from red to yellow to green to blue to purple in a clockwise direction.

You can also use the at [x] [y] syntax to specify the center point of the gradient:

/* Conic gradient with center point */
background: conic-gradient(at 50% 50%, red, blue);

In the above example:

  • The gradient starts at the default value of from, and goes from red to blue around the center point of the element.

Using Angles​

When using linear gradients, you can specify the direction of the gradient using an angle. The angle is measured in degrees, with 0deg being a gradient that goes from top to bottom, and 90deg being a gradient that goes from left to right.

Here are some examples of how to use angles with linear gradients:

/* Gradient from top to bottom */
background: linear-gradient(180deg, red, blue);

/* Gradient from bottom left to top right */
background: linear-gradient(45deg, red, blue);

/* Gradient from top right to bottom left */
background: linear-gradient(-45deg, red, blue);

You can also use keywords to specify the direction of the gradient, like this:

/* Gradient from left to right */
background: linear-gradient(to right, red, blue);

/* Gradient from top to bottom */
background: linear-gradient(to bottom, red, blue);

You can combine angles and keywords to create more complex gradients:

/* Gradient from top left to bottom right */
background: linear-gradient(45deg, red, blue);

/* Gradient from top left to bottom right, then to top right */
background: linear-gradient(45deg, red, blue 50%, green 50%, green);

Radial gradients can also use angles to specify the starting position of the gradient:

/* Radial gradient from top left corner */
background: radial-gradient(at top left, red, blue);

/* Radial gradient from center */
background: radial-gradient(at center, red, blue);

Using Multiple Color Stops​

Multiple color stops can be used to create gradients with more than two colors. A color stop is a point in the gradient where a new color is added.

The syntax for adding multiple color:

/* Syntax */
background: linear-gradient(
  direction,
  color-stop1 position,
  color-stop2 position,
  ...
);

The position parameter defines where the color stop should occur along the gradient, and can be expressed as a percentage or a length value.

As an example:

/* Gradient with three color stops */
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);

In the above example:

  • The gradient goes from red to yellow at the halfway point, and then to blue at the end.
  • The 0%, 50%, and 100% values define where the color stops should occur.

You can also use multiple color stops with radial gradients:

/* Radial gradient with three color stops */
background: radial-gradient(circle, red 0%, yellow 50%, blue 100%);

Using Transparency​

Transparency can be used in gradients to create a subtle or more dramatic effect. To add transparency to a color, you can use the rgba() or hsla() color notation, where the a stands for alpha, and defines the opacity of the color.

As an example:

/* Gradient with transparent color */
background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));

In the above example:

  • The gradient goes from fully opaque red to fully transparent red, creating a fade-out effect.

You can also use transparency with multiple color stops:

/* Gradient with multiple transparent color stops */
background: linear-gradient(
  to right,
  rgba(255, 0, 0, 1),
  rgba(255, 255, 0, 0.5) 50%,
  rgba(0, 255, 0, 0)
);

In the above example:

  • The gradient goes from fully opaque red to partially transparent yellow at the halfway point, and then to fully transparent green.

Repeating a linear-gradient​

The repeating-linear-gradient() function can be used to create a linear gradient that repeats at regular intervals. This is useful for creating patterns or backgrounds that need to repeat seamlessly.

The syntax for repeating-linear-gradient() is the same as linear-gradient(), but with an additional parameter for the size of the repeating pattern.

As an example:

/* Syntax */
background: repeating-linear-gradient(
  direction,
  color-stop1 position,
  color-stop2 position,
  ...,
  size
);

In this example:

  • The size parameter defines the length of the repeating pattern, and can be expressed as a length value or a percentage.

As an example:

/* Repeating linear gradient */
background: repeating-linear-gradient(
  to right,
  red,
  blue 50%,
  green 100%,
  10rem
);

In the above example:

  • The gradient goes from red to blue at the halfway point, and then to green at the end.
  • The 10rem value specifies the length of the repeating pattern.

You can also use multiple color stops with repeating-linear-gradient():

/* Repeating linear gradient with multiple color stops */
background: repeating-linear-gradient(
  to right,
  red,
  yellow 20%,
  green 40%,
  blue 60%,
  purple 80%,
  red 100%,
  5rem
);

In the above example:

  • The gradient goes from red to yellow to green to blue to purple and back to red, with a repeating pattern length of 5rem.

Repeating a Conic Gradient​

You can use the repeating-conic-gradient() function to create a repeating conic gradient that rotates around a center point at regular intervals. This is useful for creating patterns or backgrounds that need to repeat seamlessly.

The syntax for repeating-conic-gradient() is the same as conic-gradient(), but with an additional parameter for the size of the repeating pattern.

As an example:

/* Syntax */
background: repeating-conic-gradient(
  angle,
  color-stop1 position,
  color-stop2 position,
  ...,
  size
);

The size parameter defines the number of repetitions of the pattern, and can be expressed as a length value or a percentage.

As an example:

/* Repeating conic gradient */
background: repeating-conic-gradient(red, blue 50%, green, 2turn);

In the above example:

  • The gradient goes from red to blue at the halfway point, and then to green at the end.
  • The 2turn value specifies the number of repetitions of the pattern.

**You can also use multiple color stops with repeating-conic-gradient():**

/* Repeating conic gradient with multiple color stops */
background: repeating-conic-gradient(
  red,
  yellow 20%,
  green 40%,
  blue 60%,
  purple 80%,
  red,
  5turn
);

In the above example:

  • The gradient goes from red to yellow to green to blue to purple and back to red, with a repeating pattern of 5 turns.