CSS Box Shadow Generator
Create soft, realistic multi-layer CSS box shadows with live preview, inset effects and a ready-to-copy Tailwind class.
Controls
Live preview
Generated code
/* Your CSS will appear here */CSS Box Shadow Generator: how it works
Use the layer manager to add or remove shadows. Select any layer, adjust its offsets, spread, opacity and blur, and copy the combined CSS. The generator updates the preview and CSS output immediately, so you can test different choices before committing them to your project.
Popular ways to use this CSS generator
- Design elevated cards and floating UI panels with layered shadows.
- Make inset shadows for pressed buttons or recessed inputs.
- Export standard CSS or a Tailwind arbitrary-value shadow utility.
For more ideas, try the related tools below. All controls work right in your browser, and the generated code can be included in your own stylesheet.
About box shadow CSS.
Can CSS box-shadow have multiple layers?
Yes. Separate shadow definitions with commas. This generator combines every enabled layer into one box-shadow declaration.
What is an inset box shadow?
An inset shadow is drawn inside the element boundary. Enable Inset on a layer to preview the effect.
Can I copy Tailwind code?
Yes. Choose Tailwind export to get a compatible arbitrary-value shadow utility for Tailwind projects.
How do I create a soft CSS box shadow?
Use a larger blur radius, a moderate vertical offset, and a low-opacity shadow color. You can preview multiple layers here before copying the CSS.
What do the offset, blur and spread values mean in box-shadow?
Horizontal and vertical offsets move the shadow, blur softens its edge, and spread expands or contracts its visible size. Negative spread shrinks the shadow.
Does box-shadow change the layout of an element?
No. Box shadows are painted outside or inside the element without changing its box dimensions or document flow.
How do I remove a CSS box shadow?
Set box-shadow: none; to remove a shadow. You can also reset the generator to start a new shadow design.