🌈CSS Gradient Generator
Build linear/radial gradients visually by adding and adjusting color stops, then copy the CSS code. Live preview. Useful for website backgrounds, button designs, card UI headers, mobile app gradients, and marketing page backgrounds.
How to use
- 1Choose type (linear/radial) and angle.
- 2Add and adjust color stops.
- 3Copy the resulting CSS.
FAQ
Are complex conic-gradients supported?+
Only linear and radial for now. Conic-gradient (clockwise circular) needs separate input.
Two colors vs three or more?+
Two colors are simple and clean; three+ are richer but can look busy. 3–4 colors max is usually best.
What angle works best?+
135° (top-left → bottom-right) is the most natural and common. 90° (left→right) and 180° (top→bottom) are also clean.
Can I create transparent gradients?+
Adjust each color stop's alpha (rgba). Useful for dark overlay over text.
Tips for dark-mode gradients?+
Dark tones (#1a1a2e → #16213e) work well. Add a bit of saturation so they don't look flat.
Old browser support?+
All modern browsers support standard CSS gradients. For old browsers like IE, you'd need vendor prefixes (-webkit-, -moz-).