CSS Gradient Generator

Pick two colors and an angle, preview the gradient live, and copy the exact CSS.

Color 1
Color 2
Angle: 90°

CSS output

Walkthrough

How to use it

Pick two colors using the color swatches.
Drag the angle slider to set the gradient direction.
Watch the preview box update live above the CSS output.
Click Copy to grab the ready-to-use CSS `background` declaration.

Use cases

When you'd use this

Building a hero section background. Preview a gradient visually before committing it to CSS, rather than guessing angle and color stops blind.

Matching a brand pair of colors. Plug in your brand's two accent colors and dial in the angle that looks best at a glance.

Quickly prototyping a button or badge style. Generate a gradient CSS snippet you can paste straight into a component without opening a design tool.

FAQ

Common questions

Does it support more than two color stops?

Not yet — this version handles two-color linear gradients, the most common case. Multi-stop and radial gradient support may be added later.

What CSS does it output?

A standard linear-gradient() background declaration, compatible with all modern browsers.

Is this saved anywhere?

No — the gradient exists only in this tab. Copy the CSS output before closing if you want to keep it.