CSS Gradient
Linear and radial gradients with copy-ready CSS.
Loading tool
Place color stops, pick an angle, and copy background-image. The preview is the same CSS you copy.
How to use this tool
- Enter the source text. Type the URL, password rules, or other input the generator needs.
- Generate. Create the code, image, or snippet in this tab.
- Copy or download. Save the SVG, CSS, or text. Refreshing the page starts over.
Hints
Two stops are enough for most heroes. Extra stops help with mesh-like bands. Prefer OKLCH or hex consistently inside one project.
Frequently asked
Can I export a PNG of the gradient?
The page is for CSS. Screenshot the preview if you need a raster.
Are conic gradients included?
Yes. Switch the type control to conic.
Will this work in email?
Many email clients ignore CSS gradients. Use a sliced image there.
Can I use more than two colors?
Add stops. Keep them ordered by position.
Does it write a fallback solid?
The copy block includes a solid background-color from the first stop.