CSS Gradient Generator
Build a linear or radial CSS gradient with up to 3 color stops, with a live preview and copyable CSS.
Your file is processed locally in your browser and is not uploaded to our server.
deg
Color 1
Color 2
Color 3 (optional)
CSS
background: linear-gradient(90deg, #3fa9f5, #0b0f14);How to use CSS Gradient Generator
- 1Choose linear or radial gradient.
- 2Pick 2-3 colors, and an angle for linear gradients.
- 3Copy the generated CSS.
Frequently asked questions
This tool supports up to 3 stops for simplicity — for more complex gradients, extend the generated CSS manually.
Related tools
Developer
CSS Shadow Generator
Build a CSS box-shadow or text-shadow visually.
Developer
Color Harmony Generator
Generate complementary, analogous or triadic color schemes.
Developer
CSS Border Generator
Build a CSS border and border-radius visually.
Developer
Shades, Tints & Tones Generator
Generate shades, tints and tones from a base color.
Developer
CSS Transform Generator
Build a CSS transform (translate/rotate/scale/skew) visually.