Gradient Creator
Design beautiful gradients for your projects. Export as CSS, JSON, or Image.
Configuration
Customize colors, direction, and type
2 / 6 Colors
#0000FF
#FF0000
Add
linear
radial
conic
background: linear-gradient(90deg, #0000FF, #FF0000);
Gradient Types
Linear
Straight line transitions (up, down, diagonal)
linear-gradient(...)Radial
Circular transitions from a center point
radial-gradient(...)Conic
Rotated color transitions around a center
conic-gradient(...)CSS Support
CSS gradients are widely supported in all modern browsers. They differ from images in that they are generated by the browser, making them lightweight and infinitely scalable without quality loss.
PerformanceScalabilityNo HTTP RequestAnimation Ready
Direction Examples
To Top (0deg)
To Right (90deg)