Free CSS Gradient Generator

Build linear, radial, or conic gradients with color stops and a live preview, then copy the CSS.

Angle90°
Color stops
%
%
background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);

How to use / FAQ

Pick a gradient type, drag the angle, and edit the color stops — the preview and the CSS declaration update live. Start from a preset if you want something pleasant immediately, add as many stops as you need, and copy the finished background rule.

What's the difference between linear, radial, and conic gradients?

Linear blends colors along a straight line at your chosen angle (90° runs left to right). Radial blends outward from the center in circles. Conic sweeps colors around the center like a color wheel or pie chart — it's how CSS-only donut charts are made.

How do stop positions work?

Each stop pins a color to a percentage along the gradient line. Between stops, the browser interpolates smoothly; before the first and after the last, the color holds solid. Stops don't need to be evenly spaced — bunching them shifts where the transition happens.

How do I get a hard edge instead of a smooth blend?

Give two neighboring stops the same position — for example red at 50% followed by blue at 50%. The transition width becomes zero, producing a crisp band. Stripes and flag patterns are built entirely from coincident stops.

Are these gradients safe to use in production?

Yes. linear-gradient and radial-gradient have been supported everywhere for over a decade, and conic-gradient has shipped in all major browsers since 2020. No vendor prefixes are needed for any of them today.

Is anything uploaded?

No — the CSS is assembled in your browser as you edit. Nothing you design here leaves your device.