CSS Gradient Generator
Pick two colors and an angle — copy the CSS.
Frequently asked questions
Linear or radial — when to use which?
Linear gradients suit backgrounds, buttons, and headers. Radial gradients work for spotlights, vignettes, and orb effects. Both are pure CSS with no image download cost.
Do CSS gradients hurt page performance?
No — they render on the GPU and replace what would otherwise be image files, usually improving load time.
Can I add more than two colors?
The copied CSS is easy to extend: add more comma-separated color stops, e.g. linear-gradient(90deg, red, orange 40%, yellow).