CSS Gradient Generator
Design CSS gradients and copy the code.
0%
100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
How to use the CSS Gradient Generator
- 1 Choose linear or radial and set the angle.
- 2 Add color stops and drag each one’s position.
- 3 Copy the generated CSS straight into your stylesheet.
Examples
- ▸ A subtle two-tone hero background.
- ▸ A vibrant button gradient with three color stops.
Frequently asked questions
How do I control the gradient direction?
For a linear gradient, set the angle: 0° goes bottom-to-top, 90° left-to-right, and 180° top-to-bottom. Radial gradients spread outward from the center.
Can I use more than two colors?
Yes. Add as many color stops as you like and position each one as a percentage to create multi-color blends and hard-edged stripes.
Is the output cross-browser?
Modern browsers all support unprefixed linear-gradient() and radial-gradient(), so the copied CSS works without vendor prefixes.
Related tools
Generators
Color Palette Generator
Build harmonious color schemes from one base color.
Generators
WCAG Color Contrast Checker
Test text vs. background contrast for accessibility.
Generators
CSS Box Shadow Generator
Build CSS box shadows and copy the code.
Developer
Color Converter
Convert HEX, RGB and HSL with live preview.
Generators
Glassmorphism CSS Generator
Design a frosted-glass UI card and copy the CSS.