CSS Gradient Generator
Design a linear or radial CSS gradient, preview it live, and copy the code. Everything runs locally in your browser.
New to this? Read the Gradient Generator guide →
CSS
background:Everything is generated locally — nothing is uploaded.
How to use the gradient generator
- Pick your colours and add or remove stops to control where each colour sits.
- Choose linear or radial, and set the angle or position.
- Copy the ready-made CSS straight into your stylesheet.
The preview and the generated CSS update live, and your settings are saved in the page URL so you can bookmark or share a gradient.
Linear vs. radial
A linear gradient blends colours along a straight line; the angle decides its direction, so 90 degrees runs left to right and 180 degrees runs top to bottom. A radial gradient blends outward from a centre point in circles, which is handy for spotlights and soft backgrounds. Each colour stop says which colour appears at which position along the blend.
Tips
- Two close colours give a subtle, professional look; clashing colours rarely help.
- Keep enough contrast with any text you place on top so it stays readable.
- Use it for hero sections, buttons, cards and placeholder backgrounds.
Need to convert a brand colour to hex, RGB or HSL first? Use the colour converter.
Where you'd use this
Building a background, button or overlay without hand-writing gradient syntax, and getting a copy-pasteable rule with the colour stops where you actually want them.
For example: A hero section needs a dark overlay so white text stays readable over a photo. A linear gradient from rgba(0,0,0,0.7) to transparent at 60% keeps the top legible while leaving the image visible below.
Frequently asked questions
What does the CSS gradient generator produce?
Ready-to-paste CSS linear-gradient and radial-gradient code from the colours, stops and angle you choose, with a live preview.
Can I control the direction and colour stops?
Yes. Adjust the angle and add or move colour stops to fine-tune the blend; the generated CSS updates as you go.
Is my design uploaded?
No. The CSS is generated in your browser — copy it straight into your stylesheet.