Linear · 135°
1. Gradient Type
2. Direction
deg
3. Color Stops
%
%
%
%
%
%
4. Animation
s
5. Opacity
%
CSS
background: linear-gradient(135deg,
#6366f1 0%,
#ec4899 50%,
#f59e0b 100%
);Popular Presets
About CSS Gradient Generator
Create beautiful CSS gradients visually. Customize colors, direction, stops, and opacity, add a flowing color animation, then copy the CSS instantly.
Related Tools
More free CSS generators you might like.
Mesh Gradient Generator
Design vibrant mesh gradients visually.
CSS Wave Generator
Create layered CSS wave backgrounds and section dividers.
CSS Background Generator
Combine gradients, waves, blobs, patterns and shapes into one background.
CSS Blob Generator
Create organic CSS blob shapes for backgrounds and heroes.