CSS Shadow Generator

The CSS Shadow Generator visually creates box-shadow effects with multi-layer stacking, inset shadows, preset templates, and auto-generated CSS and Tailwind CSS v4 code. All processing happens locally in the browser.

• Multi-layer: Add multiple shadow layers, each with independent parameters, to stack complex effects.
• Parameters: X/Y offset, blur radius, spread radius, color, opacity, and inset are all adjustable.
• Presets: 8 common shadow presets, including subtle, medium, large shadows and neon effects.
• Preview Background: Switch between white, light gray, dark and black backgrounds to check different scenarios.
• CSS Code: Auto-generates standard box-shadow CSS code with one-click copy.
• Tailwind v4: Auto-matches Tailwind built-in shadow class names; custom shadows use arbitrary value syntax.

• Manage Layers: Click "Add" to add a shadow layer, click a layer card to switch editing, click the trash icon to remove.
• Adjust Parameters: Drag sliders to adjust X/Y offset, blur, spread and opacity; check inset to enable inner shadow.
• Use Presets: Click any preset in the "Shadow Presets" card to quickly apply common shadow effects.
• Switch Background: The top-right of the preview area lets you switch between white/light gray/dark/black backgrounds.
• Copy Code: Click "Copy" in the CSS code area to get the box-shadow property value.
• Tailwind Usage: Auto-matches built-in class names (e.g. shadow-md); custom shadows use arbitrary value syntax (e.g. shadow-[...]).