CSS Gradient Generator

Create beautiful linear and radial CSS gradients with two or three color stops. Preview in real time and copy the CSS instantly. No sign-up, fully client-side.

Craft a gradient in seconds. Pick two or three colors, choose linear or radial, set the angle, and copy the ready-to-paste CSS. Everything runs in your browser — nothing is uploaded.

Live preview updates as you change the colors.

About CSS gradients

Linear vs radial

A linear gradient flows along a straight line at a given angle. A radial gradient emanates from a center point in a circle.

Where gradients shine

They add depth to buttons, hero sections, cards, and backgrounds without extra image assets — keeping pages light and fast.

Built with chroma.js, an open-source library under the BSD license.

FAQ

Can I use more than three colors?
This tool supports up to three stops. For more, you can extend the generated CSS manually with additional color values.
Does the angle matter for radial gradients?
No — the angle only applies to linear gradients. Radial gradients spread evenly from the center.
Is my image or color data uploaded?
No. All processing happens locally in your browser.