CSS gradient generator
Build linear, radial and conic gradients visually: add or edit color stops, angle, position, size and repeating mode, preview live and copy the background-image CSS.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Color stops
Presets
Click a preset to apply it
Preview
The preview updates live with every change
CSS code
background-image: linear-gradient(45deg, #FF512F 0%, #F09819 100%);
What this tool does
- Tune the colour stops and angle for a button, card or page background, then paste the single background-image line into your stylesheet.
- Try all three kinds: linear, radial (shape, size and centre position) and conic, which is handy for colour wheels and loading indicators.
- Tick repeating when you need stripe or progress-bar textures — the repeating- prefix is added for you instead of hand-tuning background-size.
- Use the six presets (sunset, ocean, aurora, spotlight, colour wheel, rainbow) as colour references or as starting points to recolour.
Example
Input
Preset "Sunset": linear, angle 45deg, stops #FF512F at 0% and #F09819 at 100%
Output
background-image: linear-gradient(45deg, #FF512F 0%, #F09819 100%);
Colours are emitted as upper-case hex and stops are sorted by position; switching to radial produces radial-gradient(circle closest-side at 50% 50%, …).
Frequently asked questions
Can I enter stop positions in any order?
Yes. Stops are sorted by position before output, and equal positions keep the order you added them in. Positions outside 0–100 are clamped to the edges and rounded to one decimal, so you can never produce invalid CSS.
Why is there sometimes no size keyword on a radial gradient?
When the size is farthest-corner (the default) no keyword is written, because that is already CSS behaviour and printing it is noise. Choosing closest-side or another value adds it back.
What does the angle mean for conic gradients?
It is the from angle, starting at 12 o'clock and turning clockwise. The value is normalised to 0–360 first, so -45 becomes 315deg and 400 becomes 40deg.
How many colour stops do I need?
At least one — the tool errors out with no stops at all. Two is usually enough; add more for stripes or multi-colour rings, with positions as percentages from 0 to 100.
Is the generated code uploaded anywhere?
No. The gradient value is assembled from strings locally, the page makes no network requests, and it works offline.
Keywords：cssgradientlinear-gradientradial-gradientconic-gradient渐变线性渐变径向渐变锥形渐变配色background-image