All Tools / Blog / How to Make a CSS Gradient (Linear, Radial, and Conic)

How to Make a CSS Gradient (Linear, Radial, and Conic)

2 min read

A CSS gradient is a generated image that blends two or more colors. Because it is an image, you set it with background (or background-image), not background-color. The three types — linear, radial, and conic — cover almost every gradient you will ever need.

Try the tool →

Linear gradient

The most common type. Color flows along a straight line.

.box {
    background: linear-gradient(135deg, #FF6B57, #7A5FFF);
}

The first value is the direction: an angle (135deg), or a keyword like to right or to bottom right. After that comes a list of color stops. Add a position to control where each color lands:

background: linear-gradient(90deg, #FF6B57 0%, #FFD166 50%, #06D6A0 100%);

Radial gradient

Color radiates outward from a center point, in a circle or ellipse.

background: radial-gradient(circle at center, #7A5FFF, #1A1A2E);

Use circle for an even spread and ellipse (the default) to match the element's aspect ratio. at center sets the origin and can be any position, such as at top left.

Conic gradient

Color sweeps around a center point like a clock face. This is what powers color wheels and pie-chart backgrounds.

background: conic-gradient(from 0deg, #FF6B57, #FFD166, #06D6A0, #FF6B57);

Repeating the first color as the last stop makes the sweep loop seamlessly.

Common pitfalls

  • Using background-color. Gradients are images. background-color only accepts a single solid color and will silently ignore a gradient.
  • Forgetting a fallback. Set a plain background-color first for very old browsers, then the gradient on the next line.
  • Hard color bands. Placing two stops at the same position (#000 50%, #fff 50%) creates a hard edge on purpose — useful for stripes, surprising if unintended.

Generate one visually

Hand-writing angles and stops is fiddly. The free CSS Gradient Generator lets you pick colors, drag stops, and switch between linear, radial, and conic while copying the exact CSS. It runs entirely in your browser, so you can iterate on a gradient and paste the result straight into your stylesheet.

Try the tool →