AK
appkiro.comTip: Drag to reorder layers. Top layer appears first.
.shadow-box {
box-shadow:
0px 1px 2px 0px rgba(15, 23, 42, 0.06),
0px 8px 24px -4px rgba(15, 23, 42, 0.12);
border-radius: 16px;
}shadow-[0px_1px_2px_0px_rgba(15,23,42,0.06),_0px_8px_24px_-4px_rgba(15,23,42,0.12)]
Add the class to any element to apply these shadows.
Choose a preset
Start with a preset or add your own shadow layers.
Tweak values
Adjust offsets, blur, spread, opacity, color and radius.
Preview live
See your changes in real-time on the preview canvas.
Copy the CSS
Copy clean CSS or Tailwind class and use in your project.
The CSS box-shadow property paints one or more shadows around an element. Real interfaces stack two or three layers — a tight contact shadow plus a soft spread — to feel natural. This tool gives you a visual editor for that workflow.
Add as many layers as you need. The first layer in the list renders on top. Click any row in Shadow Layers to edit its values; toggle visibility with the eye icon to compare with/without each layer.
Outer shadows live around the box and lift it off the page. Inset shadows draw inside the box and make the element feel pressed or recessed — great for buttons, inputs, and neumorphic surfaces.
Production-quality shadows use lower opacity (5–25%) than people expect. Heavier shadows are dramatic but quickly look amateur. Try a near-black color at 8% with a large blur instead of a dark gray with low blur.
Switch the output tab between CSS and Tailwind. CSS gives you a clean .shadow-box rule. Tailwind emits an arbitraryshadow-[...] utility you can paste directly onto an element.
box-shadow is a CSS property that draws one or more shadows around an element's frame. Each shadow has X/Y offset, blur radius, spread radius, color, and an optional inset flag (which draws the shadow inside the element instead of outside).
Yes — that is the whole point of this tool. Comma-separate as many shadow declarations as you need on a single box-shadow line. The browser composites them top-to-bottom in the order you list, so the first layer sits on top.
Blur softens the edge of the shadow over the given pixel radius. Spread expands or contracts the shadow's solid footprint before the blur is applied. Negative spread values shrink the shadow inward — useful for creating tight stacked layers.
Inset draws the shadow inside the element. Use it for pressed buttons, inputs that look recessed, soft inner highlights, or to combine with an outer shadow to create neumorphic effects.
If a parent element has overflow: hidden, the shadow gets cut off at the parent's edges. Either move the shadowed element out of that parent or remove the overflow rule.
Tailwind arbitrary-value classes encode every pixel and color in the class name. For complex shadows it gets long. If that bothers you, register the shadow in tailwind.config.js as a named utility and use the short class.