Box Shadow Generator
Background
Box Color
box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.20),
         0px 10px 15px -3px rgba(0,0,0,0.15);

CSS Box Shadow Generator — Multi-Layer Shadow Builder

Share

About this tool

Free CSS Box Shadow Generator

CSS Box Shadow Generator is a visual shadow studio that lets you build, layer, and fine-tune CSS box shadows without memorizing property syntax. The CSS box-shadow property supports multiple comma-separated shadow layers, each with its own horizontal and vertical offset, blur radius, spread radius, color, and optional inset flag — making it possible to create everything from flat monochromatic shadows to layered elevation effects and neumorphic soft UIs. This tool provides individual sliders and a color picker for each layer, a live preview element that updates in real time, and a one-click export in four formats: raw CSS, Tailwind arbitrary value, JavaScript style object, and SCSS variable. The Normal mode gives full control over individual layers. The Neumorphism mode automatically pairs a light shadow and a dark shadow based on your chosen background color to create the signature soft-extruded neumorphic look. Preview the result on square, rounded, and circular shapes against several background colors to ensure the shadow looks right in your actual UI context.

Features

  • Add unlimited shadow layers, each with independent controls
  • X/Y offset sliders and number inputs for precise positioning
  • Blur radius and spread radius controls per layer
  • Per-layer color picker with opacity slider
  • Inset toggle per layer — inner or outer shadow
  • Normal mode and Neumorphism auto-pairing mode
  • Preview on Square, Rounded, and Circle shapes
  • Preview on multiple background colors
  • One-click presets for elevation, card, button, and neumorphic shadows
  • Export as CSS, Tailwind arbitrary value, JS style object, or SCSS variable

How to Use

Click Add Layer to create the first shadow layer. Use the X Offset and Y Offset sliders to position the shadow — positive X moves it right, positive Y moves it down. Increase the Blur Radius slider to soften the shadow edge; larger values create diffuse, distant-looking shadows while values near 0 create sharp, crisp edges. Adjust Spread Radius to expand or contract the shadow size: positive values add a colored halo, negative values pull the shadow inward for directional effects. Click the color swatch to open the color picker and choose any shadow color; use the Opacity slider beneath it to make the shadow more transparent. Toggle the Inset checkbox to switch from an outer shadow to an inner shadow for recessed effects. Click Add Layer again to add a second (or third) shadow — drag the layers in the list to change their stacking order. Click any preset card in the Presets panel to instantly load a well-designed multi-layer shadow configuration as a starting point. The preview box in the center updates live. Use the shape tabs (Square / Rounded / Circle) and the background color swatches to test the shadow in different contexts. Click the export tab for the format you need — CSS, Tailwind, JS, or SCSS — and click Copy.

Common Use Cases

◻
Card Elevation
Design layered elevation shadows for card components following Material Design or your own scale. Multi-layer shadows — a large soft shadow plus a small crisp one — produce realistic depth that single-layer shadows cannot achieve.
⬡
Neumorphism & Soft UI
Neumorphism mode pairs a light shadow and a dark shadow on opposite corners to create the extruded, clay-like look that defined the soft UI trend. Adjust the intensity and background to dial in the right level of depth for your design.
▦
Button States
Create distinct default, hover, and pressed button states with shadow layers. Reduce offset and blur slightly on :hover for a subtle lift effect, and switch to inset shadows on :active to simulate a physically pressed button.
✦
Modal & Overlay Backdrops
Design large, diffuse shadows for modal dialogs and floating panels using high blur values and low opacity. Multiple layers let you add both a distant ambient shadow and a tighter contact shadow for a realistic result.
≡
Design Systems
Define an elevation token scale (z0 through z5) with consistent shadow parameters for your component library. Export as SCSS variables or JS objects for direct use in Sass-based design systems or CSS-in-JS theming.
◎
Tailwind Projects
Generate Tailwind arbitrary shadow values like shadow-[0_20px_60px_rgba(0,0,0,0.15)] for utility-first stylesheets where the default shadow utilities do not match your design requirements.

Frequently Asked Questions

The CSS box-shadow property adds one or more shadow effects behind an element's frame. Each shadow is defined by horizontal offset (X), vertical offset (Y), blur radius, spread radius, and color. Multiple comma-separated values stack shadows on top of each other, allowing complex multi-layer depth effects. The inset keyword makes a shadow appear inside the element rather than outside it.

Neumorphism (or soft UI) is a design style that uses dual box shadows — one light shadow and one dark shadow on opposite corners — to make elements appear to be extruded from or pressed into the background surface. The effect works best when the element background closely matches the page background. This tool's Neumorphism mode automatically calculates the light and dark shadow values from your chosen background and shadow colors.

Yes. Click the Add Layer button to stack as many shadows as you need. Each layer has independent controls for X offset, Y offset, blur, spread, color, opacity, and inset toggle. All layers are combined into a single box-shadow property with comma-separated values in the output. Drag layers in the list to reorder them — the order affects which shadow appears on top.

Four formats are available. CSS outputs the raw box-shadow property ready to paste into your stylesheet. Tailwind outputs an arbitrary value class like shadow-[0_4px_20px_rgba(0,0,0,0.15)] for utility-first projects. JavaScript outputs a camelCase style object property for React inline styles. SCSS outputs a variable definition for use in Sass-based projects.

The inset keyword changes the shadow from an outer drop shadow to an inner shadow that appears inside the element's border. This creates a recessed or pressed-in effect — useful for input fields that appear sunken, pressed button states, and inset card panels. The inset checkbox on each layer in this tool toggles the keyword on or off.

The spread radius expands or contracts the shadow uniformly in all directions before blur is applied. A positive spread value makes the shadow larger than the element, effectively creating a border-like colored outline. A negative spread shrinks the shadow inward, which paired with an offset creates directional shadows that only appear on specific sides. At 0, the shadow exactly matches the element dimensions before blur.

For a soft Material Design-style elevation shadow, use a large blur radius (20–40px), zero or slightly positive spread (0–4px), and a semi-transparent dark color like rgba(0,0,0,0.12). Add a second layer with a smaller blur (4–8px) and slightly higher opacity rgba(0,0,0,0.08) to add crispness at the near edge. The neumorphism presets in this tool show similar multi-layer techniques.

box-shadow always renders against the element's rectangular bounding box, ignoring transparent areas inside the element. The CSS drop-shadow() filter function follows the actual alpha channel of the element, respecting cutouts in images and SVGs. For standard rectangular elements they look the same, but for non-rectangular content (transparent PNGs, SVG icons) drop-shadow() produces a more accurate silhouette shadow.