CSS Gradients

CSS Gradients allow you to display smooth transitions between two or more specified colors. Gradients are actually a type of <image> data type, which means they can be used anywhere an image can be used, most commonly in the background-image property.

CSS defines two main types of gradients: Linear Gradients and Radial Gradients.

Linear Gradients (linear-gradient())

Linear gradients create a color transition along a straight line. You need to specify at least two colors (called "color stops").

Syntax

linear-gradient([<angle> | to <side-or-corner>], <color-stop1>, <color-stop2>, ...);

• Direction (Optional):
  • to <side-or-corner>: Can be to right, to left, to top, to bottom, to top right, etc.
  • <angle>: An angle value, such as 45deg. 0deg is equivalent to to top, 90deg is equivalent to to right.
  • If omitted, the default is to bottom.
• Color Stops: Color values, optionally followed by a position (percentage or length).

Examples

/* Default top-to-bottom gradient */
.gradient-1 {
  background-image: linear-gradient(blue, pink);
}

/* Left-to-right gradient */
.gradient-2 {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* Diagonal gradient */
.gradient-3 {
  background-image: linear-gradient(45deg, #6a11cb, #2575fc);
}

/* Gradient with multiple color stops and transparency */
.gradient-4 {
  background-image: linear-gradient(to right, red, rgba(255, 255, 0, 0.5), blue);
}

/* Specify color stop positions to create hard stripes */
.gradient-5 {
  background-image: linear-gradient(to right, red 50%, blue 50%);
}

Radial Gradients (radial-gradient())

Radial gradients create a color transition radiating outward from a central point in a circular or elliptical shape.

Syntax

radial-gradient([<shape> <size> at <position>], <color-stop1>, <color-stop2>, ...);

• Shape (Optional): circle or ellipse (default).
• Size (Optional): Defines the size of the ending shape. Can be keywords (closest-side, farthest-side, closest-corner, farthest-corner) or specific lengths/percentages.
• Position (Optional): Uses the at keyword to define the center point of the gradient, similar to background-position.
• Color Stops: Same as linear gradients.

Examples

/* Default elliptical gradient starting from center */
.radial-1 {
  background-image: radial-gradient(red, yellow, green);
}

/* Circular gradient */
.radial-2 {
  background-image: radial-gradient(circle, white, #6dd5fa, #2980b9);
}

/* Change gradient center position */
.radial-3 {
  background-image: radial-gradient(circle at top left, magenta, cyan);
}

/* Create a "sun" effect */
.radial-4 {
  background-color: #0072ff;
  background-image: radial-gradient(circle at 20% 20%, #ffffff 0%, #0072ff 40%);
}

Repeating Gradients

The repeating-linear-gradient() and repeating-radial-gradient() functions can create repeating gradient patterns. You need to specify explicit positions for color stops, and the browser will repeat this pattern to fill the entire background.

.repeating-gradient {
  background-image: repeating-linear-gradient(
    45deg,
    #d4fc79,
    #d4fc79 10px,
    #96e6a1 10px,
    #96e6a1 20px
  );
}

Gradients are a powerful tool for implementing complex, beautiful backgrounds with pure CSS, without using any image files.