CSS Gradients

Create smooth color transitions with linear and radial gradients using CSS gradient functions.

Overview

CSS gradients let you create smooth transitions between two or more colors no image files needed. Gradients are values for the `background-image` property. There are two main types: **Linear gradients** transition colors in a straight line. You specify a direction and a list of color stops. **Radial gradients** radiate from a center point outward in a circular or elliptical pattern. Gradients can take any color format (named, hex, rgb, hsl) and you can add as many color stops as you need. You can also use percentage positions to control exactly where each color transition happens.

Key Points

•Gradients are background-image values, not background-color
•linear-gradient(direction, color1, color2, ...) creates a straight transition
•Default direction for linear-gradient is top to bottom (180deg)
•radial-gradient(shape, color1, color2) radiates from center outward
•Color stops can be positioned: linear-gradient(red 0%, blue 100%)
•Gradients scale perfectly because they are generated, not rasterized

Examples

Basic linear gradients

/* Top to bottom (default) */
.grad-1 {
  background-image: linear-gradient(#4facfe, #00f2fe);
}

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

/* At an angle */
.grad-3 {
  background-image: linear-gradient(135deg, #667eea, #764ba2);
}

Multi-stop gradient with positioned stops

.rainbow {
  background-image: linear-gradient(
    to right,
    red   0%,
    orange 16.6%,
    yellow 33.3%,
    green  50%,
    blue   66.6%,
    indigo 83.3%,
    violet 100%
  );
}

Percentage positions give you fine control over where each color starts and ends.

Radial gradient

/* Circle from center */
.radial-1 {
  background-image: radial-gradient(circle, #f6d365, #fda085);
}

/* Ellipse from top-left */
.radial-2 {
  background-image: radial-gradient(ellipse at top left, #a1c4fd, #c2e9fb);
}

Common Mistakes

Using background-color for gradients gradients go in background-image
Forgetting the direction keyword: "to right" not just "right"
Not adding a background-color fallback for older browsers (though modern browsers all support gradients)

Note

Visit cssgradient.io or uigradients.com for ready-made gradient code you can copy directly into your CSS.

CSS Gradients

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which CSS property do you use to apply a gradient?