Live
CSS Shadow Generator
Design box-shadows with the same live-preview flow.
Web · Free tool
CSS Gradient Generator
Mix colors, drag the angle, and watch the gradient render live — then copy standards-compliant background CSS.
Design a gradient
Color stops
Live preview
How it works
How gradients work
Stops blend
Every color stop marks a point where that color is fully solid. The browser interpolates between neighboring stops, so three stops create two smooth transitions.
Direction matters
Linear gradients take an angle (0° is bottom-to-top, 90° is left-to-right); radial gradients take a shape and a center position — that is how glows and spotlight effects are made.
Paste and use
The output is a single background declaration, valid in every modern browser. Paste it into any element's rule and you are done.
Questions
Gradient generator FAQ
What is the difference between linear and radial gradients?
Linear gradients flow along a straight line at a chosen angle; radial gradients radiate outward from a point as circles or ellipses. Linear suits section backgrounds and buttons; radial suits glows and spotlights.
What do the stop positions mean?
Each stop has a 0%–100% position where the color is fully solid. Between stops the browser blends smoothly. Leave positions evenly spaced for the classic look.
Is the code browser-compatible?
Yes — linear-gradient and radial-gradient are supported in every modern browser with no vendor prefixes required for this syntax.