Gradient Maker

About this tool

This gradient maker builds CSS linear and radial gradients visually: add color stops, drag their positions, set the angle or radial shape, and watch the live preview update. When it looks right, one click copies the exact background CSS — no syntax to remember.

When to use it

• Designing hero sections, buttons, or card backgrounds where a flat color feels too plain.
• Recreating a gradient you've seen by eyeballing stops against the live preview instead of guessing values in code.
• Exploring quickly: the Randomize button is a cheap way to stumble onto combinations you wouldn't have typed.

Worked example

A classic two-stop linear gradient at 135° from #667eea to #764ba2 produces the familiar blue-violet diagonal used on countless landing pages. The copied CSS is a single declaration — background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); — which you can paste onto any element. Add a third stop in the middle and pull it toward one end to bias the blend.

Frequently asked questions

What's the difference between linear and radial gradients?

Linear gradients blend colors along a straight line at the angle you choose; radial gradients blend outward from a center point in a circle or ellipse. Linear suits banners and buttons; radial suits spotlight and vignette effects.

How many color stops can I use?

As many as you like, though two or three usually look cleanest. Each stop has a position from 0% to 100% along the gradient line — clustering stops close together creates hard bands, spreading them apart creates smooth blends.

Why does my gradient show banding?

Large areas blending two similar dark colors can show visible steps, an artifact of 8-bit color. Fixes: pick endpoints slightly further apart in lightness, shorten the gradient area, or add a subtle intermediate stop.

Does the copied CSS work in all browsers?

Yes — unprefixed linear-gradient and radial-gradient have been supported in every major browser for over a decade. No vendor prefixes needed.