Design layered CSS box shadows with live preview and copy-ready CSS and Tailwind output.
Loading tool
About Box Shadow Generator
Design CSS box shadows with multiple layers. Each layer has X and Y offset, blur, spread, color, opacity and an inset option; layers can be reordered, duplicated and removed. The preview box's background, color and border radius are adjustable so you can see the shadow in context, and presets include soft, elevated, floating, neumorphic, inner and glow styles. Output is a box-shadow declaration and a Tailwind shadow-[...] class.
Common uses
- Create subtle layered shadows for cards and modals
- Design an inner shadow for inputs or pressed buttons
- Build a neumorphic or glow effect
- Convert a shadow design into a Tailwind arbitrary class
FAQ
- What is the box-shadow syntax?
- box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Blur and spread are optional, and multiple shadows are separated by commas.
- Which shadow is on top when there are several?
- The first shadow in the list is painted on top and later ones are drawn beneath it.
- Why use several layers instead of one shadow?
- Combining a tight, darker shadow with a larger, softer one looks closer to real lighting than a single blurred shadow, which is how many design systems define elevation.
- What does negative spread do?
- A negative spread shrinks the shadow before it is blurred, which keeps it from showing at the sides when combined with a vertical offset.