7 min read
2026-02-12
The colors flow in a straight line. The direction and color points are set.
The colors radiate from a central point in circles or ellipses.
Colors rotate around a central point, like on a color wheel.
Choose a gradient type
Add color dots (minimum 2)
3.Adjust Angle or Center
Copy the finished CSS code
| Type | CSS |
|---|---|
| Linear | `linear-gradient(90deg, #ff6b6b, #4ecdc4)` |
| Radial | `radial-gradient(circle, #667eea, #764ba2)` |
| Conical | `conic-gradient(#f093fb, #f5576c, #f093fb)` |
Use 2-3 colors for elegance
Similar colors create a soft transition
Complementary colors - a bright and energetic effect
Add intermediate points to control the transition
Gradients are used for page backgrounds, buttons, headers, cards, and decorative elements.
See also: Palette generator, Avatar generator, Color converter