Create linear and radial CSS gradients visually and copy the code, with a live preview.
Designers and developers building gradient backgrounds for websites and apps.
Choose the gradient type
Switch between a linear or radial gradient depending on the effect you want.
Pick your colours
Set the start and end colours with the colour pickers and watch the live preview.
Adjust and copy
For linear gradients, drag the angle slider, then copy the generated CSS.
CSS gradients make backgrounds, buttons, and cards look modern, but the syntax is fiddly to write blind — remembering the angle convention, the order of colour stops, and whether you want linear or radial means a lot of save-refresh-tweak cycles just to land on the look you want. It is the classic case where seeing the result as you adjust it is far faster than editing numbers in a stylesheet. This generator gives you that live preview. Choose linear or radial, pick your start and end colours, drag the angle, and watch the gradient update in real time — then copy production-ready CSS that works across all modern browsers. Everything happens in your browser, nothing is uploaded, and the output is standard `linear-gradient()` / `radial-gradient()` you can paste straight into your stylesheet. It is the quick way to experiment with colour combinations before committing.
Website backgrounds
Create eye-catching hero and section backgrounds without writing gradient syntax by hand.
Buttons & cards
Add subtle gradient fills that give UI components depth and polish.
Design prototyping
Try colour combinations quickly and visually before committing them to your stylesheet.
Overlays
Build gradient overlays to keep text readable over images.
Brand theming
Generate on-brand gradients to reuse consistently across a site or app.
Yes. Standard linear-gradient and radial-gradient are supported across all modern browsers.
For linear gradients it sets the direction the colours blend — e.g. 90deg goes left-to-right, 180deg top-to-bottom.
Linear blends colours along a straight line/angle; radial blends outward from a centre point in a circle or ellipse.
This generator uses two stops; you can add extra comma-separated colour stops manually in the copied CSS.
Yes — use an rgba() or alpha-hex colour as a stop to fade a gradient to transparent, handy for overlays.
No. CSS gradients are rendered by the browser and are far lighter than using a background image.
No. Everything runs in your browser.
Yes — build and copy as many gradients as you want for free, with no account.