CSS Gradient Generator
Design a gradient visually and copy the CSS. Switch between linear, radial and conic types, set an angle or centre point, and add up to five colour stops with exact positions while a live preview updates instantly.
Runs in your browser. Your files are never uploaded.
Loading CSS Gradient Generator…
How to use CSS Gradient Generator
- Choose linear, radial or conic.
- Set the angle, shape or centre point.
- Pick colours and drag the position sliders for up to five stops, or start from a preset.
- Press Copy to take the CSS declaration into your stylesheet.
How CSS gradients work
A gradient is an image generated by the browser, so it scales to any size without pixelation and costs no download. You set it with the background or background-image property. A linear gradient blends colours along a straight line, a radial gradient spreads outward from a centre point, and a conic gradient sweeps around a centre like the hand of a clock.
Each colour stop pairs a colour with a position. The browser blends smoothly between neighbouring stops. Placing two stops at the same position creates a hard edge instead of a blend, which is how stripes and pie-chart style effects are made.
Design tips
Subtle gradients between two closely related hues usually look more polished than loud rainbow blends. Adding a middle stop with a slightly different lightness can avoid the muddy grey that sometimes appears between two saturated colours. If text sits on top of the gradient, check that contrast stays readable across the entire range, not just at one end.
- Use the repeating option with small stop positions to build stripes.
- Combine a gradient with a solid background-color as a fallback.
- Large gradients on big areas can band on some screens; a tiny amount of noise or a third stop can reduce it.
Using the generated code
The copied line is a complete declaration that you can paste into a rule, for example on a body, hero section or button. Stops are written in ascending order of position even if you arrange the sliders differently.
The generator creates standard syntax without vendor prefixes, interpolation hints or colour-space options. Everything runs in your browser and nothing is sent anywhere.
Why use this css gradient generator tool
- Three gradient types. Linear, radial and conic gradients, plus an optional repeating mode for linear and radial.
- Up to five stops. Add or remove colour stops and place each one precisely with a percentage slider.
- Live preview. The preview panel uses the same CSS that you copy, so what you see is what you get.
- Quick presets. Start from a ready-made palette and then adjust it.
Frequently asked questions
Which browsers support these gradients?
Linear and radial gradients have been supported without prefixes in all current browsers for many years. Conic gradients are also supported in current versions of the major browsers, though very old browsers will ignore them. Provide a solid background colour as a fallback if you need to support old software.
What does the angle mean?
In a linear gradient, 0 degrees points upward, 90 degrees points to the right, 180 degrees downward and 270 degrees to the left. In a conic gradient the angle is the starting direction of the sweep.
Can I use transparent colours?
The colour pickers choose opaque colours. After copying you can replace a value with an rgba() or hsla() colour by hand to fade into transparency.
More free tools
PX to REM Converter
Convert pixels to rem and em, and back, with a custom root font size. Includes a table of common sizes from 8px to 64px and a copy-ready CSS declaration.
Open toolBase64 Encode & Decode
Encode text to Base64 or decode Base64 back to text. Supports UTF-8 and URL-safe Base64. Free, instant and runs in your browser.
Open toolURL Encode & Decode
Encode or decode URLs and query strings with percent-encoding. Choose component or full-URL mode. Free, instant and private.
Open tool