Box Shadow Generator

Create single or multi-layer CSS box shadows. Use presets, tweak layers, and export as CSS, inline style, or Tailwind config.

Layer 1
px
px
px
px
%

Controls

Mode
Presets
Elevation
Effects
UI Patterns
Layers (1)

Preview

Shape
Background

Export

box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);
boxShadow: "0px 8px 24px 0px rgba(0,0,0,0.15)"
Key:
boxShadow: {
  'custom': '0px 8px 24px 0px rgba(0,0,0,0.15)'
}

Related Tools

Explore these related free tools to enhance your productivity and workflow.

Design & UI Tools

Gradients, shadows, border radius, and more design utilities

CSS Gradient Generator

Create CSS gradients with custom colors and angles

Border Radius & Blob Generator

Generate border radius and organic blob shapes

Frequently Asked Questions

Can I use multiple box shadows at once?

Yes! Add multiple layers, adjust each one independently, and toggle visibility. The tool outputs valid CSS with comma-separated shadows that work in all modern browsers.

How do I share my shadow design?

The URL automatically updates as you edit. Simply copy and share the URL from your browser's address bar—recipients will see your exact shadow configuration.

How do I customize the Tailwind key name?

In the Export section, you'll find a 'Key' input field above the Tailwind output. Edit it to match your design tokens (e.g., 'card', 'elevated', 'glow').

What is neumorphism?

Neumorphism (or soft UI) uses two shadows—a light one and a dark one—to create a soft, extruded effect. Use the Neumorphism preset to get started, then adjust colors and offsets to match your design.