How to Create CSS Gradients: Linear, Radial and Color Stops

Gradients are everywhere in modern UI — hero backgrounds, buttons, glassy cards, subtle section dividers. The CSS is powerful but fiddly: get an angle or a color-stop percentage slightly wrong and a clean fade turns into an ugly band. A live editor lets you see exactly where each color lands before you ship it.

Linear vs radial

CSS gradients are values you assign to background (technically background-image). The two you reach for most are:

• linear-gradient blends colors along a straight line. You give it a direction — an angle in degrees or a keyword like to right — followed by color stops.
• radial-gradient blends outward from a center point in a circle or ellipse, great for spotlights and soft glows.

In CSS, 0deg points up and angles increase clockwise, so 90deg runs left-to-right and 180deg runs top-to-bottom.

Understanding color stops

A color stop is a color plus an optional position. Positions are usually percentages from 0% (start) to 100% (end). With two stops you get a simple fade; add more for richer transitions:

.hero {
  background: linear-gradient(90deg, #5e5ce6 0%, #ec4899 100%);
}

.spotlight {
  background: radial-gradient(circle, #5e5ce6 0%, #ec4899 100%);
}

Placing two stops at the same position creates a hard edge — a stripe rather than a fade — which is handy for progress bars and pattern effects.

A practical walkthrough

The CSS Gradient Generator lets you switch between linear and radial, drag an angle slider, and add as many color stops as you like — each with its own color and position. The preview and the CSS update together. To build a three-color sunset:

1. Keep the type on Linear and set the angle to about 120deg.
2. Set the first stop to a deep orange at 0%, add a middle pink around 50%, and end on purple at 100%.
3. Copy the generated background value straight into your stylesheet.

.sunset {
  background: linear-gradient(120deg, #ff8a00 0%, #ec4899 50%, #5e5ce6 100%);
}

Common pitfalls and tips

Banding between very different hues. A gradient from a saturated blue straight to yellow can show a muddy band in the middle. Add an intermediate stop, or choose colors closer together on the color wheel.

Vendor prefixes are almost never needed anymore. Every current browser supports unprefixed linear-gradient and radial-gradient, so you can drop the old -webkit- and -moz- variants unless you must support very old engines.

Gradients are images, not colors. That means you can layer several with commas, and you can combine a semi-transparent gradient over a solid background-color for tinting. It also means background-color alone will not animate a gradient — transition the whole background or cross-fade layers instead.

Keep text readable. Placing white text on a light section of a gradient can fail accessibility. Check the lightest and darkest points against your text with the Color Contrast Checker.

Wrapping up

Once you know that a gradient is just a direction and a list of positioned color stops, the rest is design. Tune the angle and stops visually, copy the exact CSS, and you are done — all locally in your browser. Pull harmonious colors from the Color Picker and add depth with the Box Shadow Generator to finish the look.