Free CSS Gradient Generator
Build CSS gradients visually and copy the code. Supports linear and radial gradients with unlimited color stops.
Try it
How it works
CSS gradients are built from a type, direction, and color stops:
/* Linear */
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
/* Radial */
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);The tool just concatenates your color choices into a valid CSS string. The preview applies it as an inline style.
Gradient inspiration
Some popular combinations to try:
- Sunset:
#f093fb→#f5576c - Ocean:
#4facfe→#00f2fe - Forest:
#11998e→#38ef7d - Night:
#0f0c29→#302b63→#24243e