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