What this tool does
CSS gradients create smooth transitions between colors without using images. This generator builds linear-gradient and radial-gradient values you can paste straight into a background property.
Linear vs. radial
- Linear — colors blend along a straight line; the angle sets the direction (90° = left to right).
- Radial — colors radiate outward from the center in a circle.
Example
background: linear-gradient(90deg, #0065e8, #de00ac); fades blue into pink across an element.
Tip
Gradients with two nearby hues look more modern than high-contrast combinations. Add a subtle angle (like 135°) for depth.