Visual editor for CSS linear gradients - drag color stops, adjust angle, see the result instantly. Multi-stop support, named directions (to bottom, to right, etc.), and clean CSS output ready to paste into your stylesheets.
When to use this
Use for: hero-section backgrounds, button hover states, card backgrounds with depth, brand-color transitions, retro-style chrome / glassmorphism effects.
Frequently Asked Questions
What's the difference between angle and direction syntax?
Angle: `linear-gradient(45deg, ...)` rotates 45° clockwise from horizontal. Direction: `linear-gradient(to bottom right, ...)` is angle-equivalent and reads more clearly. Modern browsers support both; pick whichever your team prefers.
Powered by CSS Gradient Generator.