How to Create CSS Gradients (Linear and Radial)

Gradients add depth to buttons, hero sections, and cards without a single image. The CSS is simple once you know the parts. Here is how to build one and the small details that make it look good.

Linear vs radial

Linear gradients blend colors along a straight line. Use them for backgrounds, buttons, and overlays. linear-gradient(180deg, #3DDA85, #1faf63) goes top to bottom.
Radial gradients blend outward from a point, like a soft spotlight. Use them for glows and focal effects. radial-gradient(circle, #fff, #ddd).

Build one in seconds

Open the CSS Gradient Generator.
Pick your colors, drag the stops, and set the angle (for linear) or shape (for radial).
Copy the generated background rule into your stylesheet.

It updates live as you adjust, so you see the result before you paste it.

The parts that matter

Angle: 0deg points up, 90deg points right, 180deg points down. Most UI gradients use 135deg or 180deg.
Color stops: positions where a color sits. linear-gradient(90deg, #000 0%, #fff 100%) is a full fade; adding a third stop creates a sharper transition.
Hard stops: place two stops at the same position to make a crisp line instead of a blend, useful for stripes or two-tone backgrounds.

Keep it subtle

The most common gradient mistake is too much contrast between colors. For backgrounds, pick two shades that are close in hue and lightness. Big jumps look muddy in the middle. For buttons, a slightly darker version of the base color reads as a clean, modern fill.

Need the exact shades first? Use the Color Palette Generator.
Converting a color between formats? Try the Color Converter.
Adding depth another way? See the CSS Box Shadow Generator.

Pick two close colors, set the angle, copy the rule. A good gradient takes about thirty seconds.