About CSS Gradient & Shadow Generator
CSS Gradient & Shadow Generator lets you design a linear or radial gradient, or a box-shadow, with sliders and color pickers while watching a live preview update instantly. When it looks right, copy the generated `background` or `box-shadow` declaration straight into your stylesheet. Everything runs in your browser — nothing is uploaded, logged, or stored anywhere.
How to use it
- 1
Pick a mode
Switch between the Gradient and Box Shadow tabs at the top of the tool.
- 2
Adjust the controls
For gradients, set the type (linear/radial), angle or shape, and add or remove color stops. For shadows, adjust offset, blur, spread, color, opacity, and inset with the sliders.
- 3
Copy the CSS
The preview box and the CSS output pane both update live as you adjust controls — click Copy CSS to copy the declaration to your clipboard.
What it does
- Builds linear-gradient() and radial-gradient() declarations from up to 5 color stops
- Builds box-shadow() declarations with offset, blur, spread, color, opacity, and inset support
- Shows a live visual preview alongside the generated CSS as you adjust any control
- Copies the final `background:` or `box-shadow:` declaration ready to paste into a stylesheet
FAQ
Can I create a gradient with more than 2 colors?
Yes. Click "+ Add stop" to add up to 5 color stops, each with its own color and position (0–100%). Stops are automatically rendered in position order regardless of the order you added them.
Why is there an opacity slider separate from the shadow color?
The browser's native color picker only outputs solid hex colors (#rrggbb), with no alpha channel. The opacity slider combines with the picked color to produce an rgba() value, since semi-transparent shadows are the common case for soft, layered elevation effects.
Does this tool validate that the CSS will work in every browser?
The generated syntax (linear-gradient, radial-gradient, box-shadow) is standard CSS supported by all current browsers. It doesn't check vendor-prefix needs for very old browsers, since none of the current major browsers require prefixes for these properties anymore.
Does this tool send my design anywhere?
No. The preview and CSS generation both happen locally in your browser as you adjust the controls. Nothing is sent over the network.