CSS Shadow Generator
Tune box-shadow offset, blur, spread, and color, then copy the CSS.
Live preview
Offset X: 0px
Offset Y: 8px
Blur: 24px
Spread: 0px
CSS output
0px 8px 24px 0px #0F172A
box-shadow: 0px 8px 24px 0px #0F172A;
Shadow preview
box-shadow: 0px 8px 24px 0px #0F172A;
0px 8px 24px 0px #0F172A
Why use a shadow generator?
box-shadow is easier to tune when you can see offset, blur, and spread on a card instead of guessing in a stylesheet. Keep production blur modest on phones. This page is one shadow, not inset, not text-shadow, and not a photo filter — copy the declaration and stack extra layers by hand if a mock needs two.
Popular shadows
Your data stays private
Shadow CSS is generated in this browser. Nothing is uploaded or stored on a server.
About generating box-shadow CSS
CSS Shadow Generator tunes offset, blur, spread, and color for a box-shadow and copies the declaration. The preview is a local box. It is not a drop-shadow filter for photographs and it is not text-shadow (that is a different property). Use it for cards, buttons, and elevation tokens.
Large blur values look soft and can be expensive to paint on low-end phones — keep production shadows modest. Multiple stacked shadows are not a list editor here; copy one and combine by hand. Color comes from the same sRGB picker family as Color Picker.
Related: CSS Border Generator for radius and stroke, Gradient Generator for fills, CSS Formatter to pretty-print a full rule.
The URL is /tools/css-shadow-generator. Inset shadows and filter: drop-shadow are not this panel. Close the tab to discard the draft. Pair with Border Generator when the card also needs a radius.
Material-style elevation is a product choice. We do not ship a token set. Copy one declaration, then stack more by hand if a mock needs two shadows. Nothing is uploaded.
How to generate a shadow
Tune offsets and blur
X, Y, blur, and spread update the preview as you change them.
Pick a color
Soft black or a tinted shadow both work. Copy the full box-shadow value.
Paste into CSS
Add it to a class. Stack extra shadows yourself if you need layers.
No upload
Everything stays in this tab. Border Generator is the sibling for radius.
Related tools
Color Picker
Pick a color and copy HEX, RGB, and HSL values in this browser.
Image Color Picker
Open an image, hover to magnify pixels, and copy HEX, RGB, and HSL. Nothing is uploaded.
Gradient Generator
Build a CSS linear-gradient with two stops and a live preview. Copy the CSS locally.
CSS Border Generator
Preview border width, style, radius, and color, then copy the CSS.
Color Converter
Convert colors between HEX, RGB, and HSL. Type or paste below — all three formats update as you type.
CSS Shadow Generator FAQ
box-shadow for boxes. It is not text-shadow and not a photo drop-shadow filter. Stack extra shadows by combining copied values yourself.
Large blur is expensive to paint on phones. Elevation tokens in production are usually small offsets and moderate blur.
No. Generation stays in this tab.
The panel is a standard box-shadow playground: offset, blur, spread, and color. Inset and filter: drop-shadow are different CSS. Stack extra shadows by concatenating copied values. Keep production blur modest on phones. Close the tab to discard the draft. Border Generator is the sibling for radius.