CSS Gradient Generator
Create linear or radial CSS gradients with a stop editor — copy the snippet instantly.
Loading tool…
About this tool
This is the code-focused sibling of the gradient generator: choose linear or radial, edit stops visually, and get a clean, copy-ready CSS background declaration. Radial mode adds circle/ellipse shape control for glows and vignettes.
It is built for developers who want the snippet, not a design lecture — preview, copy, paste, done.
How to use
- Switch between linear and radial modes.
- Add and position your color stops.
- Set the angle (linear) or shape (radial).
- Copy the generated CSS snippet.
Frequently asked questions
Linear gradients transition along a straight line at an angle; radial gradients radiate outward from a center point, optionally as a circle or ellipse.
The standard linear-gradient() and radial-gradient() syntax is supported by all modern browsers without prefixes.
This editor works with hex stops; for transparency, take the copied snippet and replace a stop color with an rgba() value at the same position.
Related tools
Color Palette Generator
Enter a base color to generate complementary, analogous, triadic, and more palettes.