About CSS gradient
Perceptual gradient generator
How to use
Build linear and radial gradients with multiple stops, adjust the angle and color space, then copy the finished CSS.
CSS gradient
0%
100%
Linear, radial and conic gradients
A linear gradient blends colors along a straight line at a chosen angle. Radial gradients spread outward from a center point, and conic gradients sweep around a center like a color wheel.
Move each color stop between 0% and 100% to control where the blend begins and ends, then copy the generated CSS.
CSS output and performance
CSS gradients are rendered by the browser without image requests, so they scale to any resolution and stay crisp on high-density screens.
Use two or three stops for most interfaces. Very long stop lists cost little to render but become hard to maintain in a design system.
Frequently asked questions
How do I use the generated gradient?
Copy the background declaration and paste it into your CSS rule. The preview and code update together as you change colors, angles and stop positions.
What angle should I use?
0deg points up, 90deg points right, and 180deg points down. The preset buttons jump to common directions.
Can a gradient be transparent?
Yes. Use a transparent color stop or an rgba value in your CSS after copying the declaration.
Do gradients work in email?
Many email clients ignore gradients. Provide a solid fallback color before the gradient declaration.