What this gradient generator does
It builds a valid CSS linear-gradient() or radial-gradient() from three colour stops and gives you the exact declaration to paste. Drag the stops, change the angle, and the preview and code update together — no round-trip to a design tool, no guessing how the browser interpolates.
Linear vs radial
Linear runs the colour ramp along a straight angle: 0° goes bottom-to-top, 90° left-to-right, 135° is the classic diagonal. Radial expands from a centre point you position with the X/Y sliders — useful for spotlights, vignettes and soft button backgrounds.
Where gradients earn their keep
- Hero and card backgrounds that need depth without an image request
- Button and badge fills with a subtle diagonal ramp
- Chart area fills where a solid colour looks flat
- Placeholder skeletons while images load
Performance and accessibility notes
A CSS gradient is painted by the GPU as part of the layer, so it costs no extra HTTP request and scales to any resolution. Two cautions: text over a gradient needs a contrast check at both ends of the ramp, and very large radial-gradient areas on low-end phones can force repaints — prefer promoting the element to its own layer if you animate it.
Hard stops and banding
Placing two stops at the same percentage creates a hard edge (a stripe). If you see visible banding on large areas, add a subtle third stop or a tiny noise overlay — browsers interpolate in sRGB by default, which is prone to banding in dark ramps.
Frequently Asked Questions
Why does my gradient look different in Safari?
Safari historically interpolates gradients in a different colour space for some values. Test the output in the browsers you support; the declaration itself is standard CSS.
Can I use more than three colours?
Yes — add more comma-separated stops by hand. Three covers most UI cases; the generator keeps the code readable.
How do I make a hard-edged stripe?
Set two stops to the same position, for example 50% and 50%. Everything before is the first colour, everything after the second.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.