Color & Design

Gradient Generator

Blend two colors into a gradient, adjust the angle and shape, and copy the CSS when the preview looks right.

Color & design

Two-color gradient

Local only

Start colorEnd colorType

Angle135°Blend position50%

background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);

Nothing is uploaded

The gradient is rendered by your own browser using plain CSS.

Linear and radial gradients

A linear gradient runs along a straight line whose direction you set in degrees — 0° points up, 90° points right. A radial gradient spreads out in a circle from a point you choose.

Keeping gradients tasteful

Use two colors that sit close together on the color wheel to avoid muddy middles.
Keep contrast high enough for any text placed on top.
Subtle gradients read as premium; extreme hue jumps rarely do.

Good to know

Frequently asked questions

Where do I paste the CSS?

Into the background property of the element you want to style, for example .hero { background: linear-gradient(...); }.

Why does my gradient look banded?

Very close colors over a large area can band on some screens. Adding a slight hue difference or a subtle noise overlay usually fixes it.

Do gradients work everywhere?

Linear and radial CSS gradients are supported in every modern browser without prefixes.

Can I use more than two colors?

Yes — use the CSS Gradient Generator, which supports multiple stops and conic gradients.

Two-color gradient

Linear and radial gradients

Keeping gradients tasteful

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter