Stack up to five box-shadow layers, pick colors from the full Tailwind palette, copy CSS or a Tailwind v4 @theme entry. No signup, no watermarks.
Preview background
CSS
box-shadow: 0px 4px 6px -2px #17171714, 0px 12px 24px -6px #1717171a;Tailwind v4 @theme
@theme {
--shadow-brand: 0px 4px 6px -2px #17171714, 0px 12px 24px -6px #1717171a;
}Presets
Layers
Layer 1
X offset
0pxY offset
4pxBlur
6pxSpread
-2pxOpacity
8%Color
Pick a preset
Flat card, soft card, elevated modal, neumorphic, brand glow — or start from scratch.
Edit each layer
X, Y, blur, spread, opacity, color (Tailwind palette), and inset toggle.
Stack layers
Up to five layers. Realistic shadows usually need two — a tight inner and a longer outer.
Copy the snippet
Raw CSS or a Tailwind v4 @theme entry that gives you a shadow-brand utility.
One layer looks flat. Two is the sweet spot for cards and modals — a tight small shadow for the edge contact plus a wider, softer shadow for ambient lift. Three or more start to feel heavy unless you're going for a neumorphic effect.
Tailwind's palette produces shadow tones that match your overall theme naturally. For a dark-themed card, picking neutral-900 at ~15% alpha reads as a real shadow; a pure #000000 tends to read too dense.
Tailwind v4 lets you define custom shadows inside an @theme block. The snippet registers --shadow-brand, which unlocks a shadow-brand utility across your project so the shadow you designed here stays in sync everywhere.
Yes — it's a standard CSS property. It reverses the shadow so it paints inside the element instead of outside, useful for pressed-in UI and neumorphic effects.
Shade generator
Generate a full 50→950 Tailwind palette from any base color, along the Tailwind lightness curve.
Cubic bezier
Design a CSS easing curve with draggable handles — with preset eases and copy-ready outputs.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal