How it works
Pick a gradient type, an angle and two or three colors with their positions. The preview updates instantly, and you get ready-to-paste CSS plus a 1920 × 1080 PNG for slides, wallpapers and social posts.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
Gradient types
- Linear: colors blend along a straight line at the angle you set (0° = bottom to top, 90° = left to right).
- Radial: colors spread out from the center in a circle.
- Conic: colors sweep around the center like a color wheel or pie chart.
Tips
- Colors close on the color wheel blend more smoothly than opposites.
- Keep text on gradients readable by checking contrast at both ends.
- All modern browsers support these CSS gradients without prefixes.
Standards and sources
- Gradient syntax follows the CSS Images Module Level 3 and 4 (W3C)
Last reviewed October 7, 2026
Frequently asked questions
How do I make a CSS gradient?
Pick a type, set the angle and colors, then copy the generated "background" line into your stylesheet.
What does the angle mean?
For linear gradients, 0° runs from bottom to top, 90° from left to right and 180° from top to bottom.
Can I use more than two colors?
Yes. Tick "Add a middle color" to add a third color stop with its own position.
Can I download the gradient as an image?
Yes. "Download PNG" saves a 1920 × 1080 image, ready for slides, wallpapers or social media.
Do these gradients work in all browsers?
Linear and radial gradients work everywhere; conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.