CSS3 gradients

CSS3 gradients allow you to display smooth transitions between two or more specified colors.

Previously, you had to use images to achieve these effects. However, by using CSS3 gradients, you can reduce download time and bandwidth usage. Additionally, elements with gradients look better when zoomed in because the gradient is generated by the browser.

CSS3 defines two types of gradients:

  • Linear Gradients – Down/Up/Left/Right/Diagonal direction
  • Radial Gradients – defined by their centers

CSS3 linear gradient

In order to create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

Example of linear gradient:
Linear gradient - top to bottom (by default)

Grammar

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

Example

Linear gradient from top to bottom:

#grad {<!-- -->
    background-image: linear-gradient(#e66465, #9198e5);
}

Linear gradient – left to right:

The example below demonstrates a linear gradient starting from the left. Starting from red, slowly transitioning to yellow:
Example:
Linear gradient from left to right:

#grad {<!-- -->
  height: 200px;
  background-image: linear-gradient(to right, red, yellow);
}

Linear Gradient – Diagonal

Example:
Linear gradient from top left to bottom right:

#grad {<!-- -->
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

Use angle

Example
Linear gradient with specified angle:

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

Use multiple color nodes

Example
Linear gradient from top to bottom with multiple color nodes:

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

3 color nodes (evenly distributed)

7 color nodes (evenly distributed)

3 color nodes (uneven distribution)

Note: When specifying percentages, the colors are unevenly distributed.

Note: Internet Explorer 8 and earlier versions do not support gradients.

Use transparency

Example
Linear gradient from left to right, with transparency:

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

Repeating linear gradient

Example
A repeating linear gradient:

#grad {<!-- -->
  /* Standard syntax */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 Radial Gradient

A radial gradient is defined by its center.
In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval), and size of the gradient. By default, the center of the gradient is center (meaning at the center point), the shape of the gradient is ellipse (meaning an ellipse), and the size of the gradient is farthest-corner (meaning to the farthest corner).
Example of radial gradient:

grammar

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

Radial gradient – color nodes are evenly distributed (by default)

Example
Radial gradient with evenly spaced color nodes:

#grad {<!-- -->
  background-image: radial-gradient(red, yellow, green);
}

Radial gradient – uneven distribution of color nodes

Example
Radial gradient with uneven distribution of color nodes:

#grad {<!-- -->
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Set shape

The shape parameter defines the shape. It can be the value circle or ellipse. Among them, circle represents a circle and ellipse represents an ellipse. The default value is ellipse.
Example
Radial gradient with a circular shape:

#grad {<!-- -->
  background-image: radial-gradient(circle, red, yellow, green);
}

The use of keywords of different sizes

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
    Example
    Radial gradient with keywords of different sizes:
#grad1 {<!-- -->
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
 
#grad2 {<!-- -->
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

closest-side:

farthest-side：

closest-corner:

farthest-corner (default):

Repeating radial gradient

The repeating-radial-gradient() function is used to repeat radial gradients:
Example
A repeating radial gradient:

#grad {<!-- -->
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Summary

When using CSS3 gradients, you can control the gradient effect by setting different starting point, end point, angle, color point position, transparency and other attributes. It should be noted that some older versions of browsers may not fully support CSS3 gradients, so compatibility should be considered when using them, and support can be enhanced by adding vendor prefixes.

Overall, CSS3 gradients provide a simple yet powerful way to create smooth transition effects that make web designs richer and more engaging.