Design shadows without trial and error
A good box-shadow gives cards and buttons depth, but the CSS has five values plus colour and it is fiddly to tune by hand. Move the sliders, watch the preview box respond instantly, toggle inset for inner shadows, then copy a clean declaration straight into your stylesheet.
Private by design. The generator runs in your browser; nothing is uploaded.
Frequently asked questions
What does each slider do?
Offset X and Y move the shadow horizontally and vertically, blur softens its edge, spread grows or shrinks it, and opacity sets how strong it is.
What is an inset shadow?
Inset draws the shadow inside the element instead of behind it, useful for pressed-in or inner-glow effects.
Is the CSS standard?
Yes. It outputs a standard box-shadow property that works in every modern browser.
More free tools
Design tools: CSS Gradient Generator, HEX to RGB, Color Palette Generator · See all Alienated Tools.