What is the CSS box-shadow property?

box-shadow draws one or more shadow effects around an element. Syntax: x-offset y-offset blur spread color, optionally followed by inset. It is the foundation of depth in modern UI — used for cards, buttons, modals, and any element that needs to lift off the page.

What is the difference between blur and spread?

Blur softens the shadow edges (0 = sharp, 20+ = very diffuse). Spread grows or shrinks the shadow uniformly without softening. Negative spread can produce tight shadows that hug an element closely. Typical UI: blur 4–16, spread 0.

When should I use multi-layer shadows?

Real-world shadows have multiple components: a tight close shadow for contact with the surface, plus a wider diffuse shadow for ambient light. Stacking 2–3 layers (e.g. 0 1px 2px and 0 8px 24px) produces dramatically more realistic depth than any single shadow. This is the technique behind Apple, Google, and Stripe UI shadows.

What is the difference between box-shadow and filter: drop-shadow?

box-shadow respects the element's rectangular border box. filter: drop-shadow() follows the actual rendered shape — useful for SVGs, PNG cutouts, and irregular shapes. For 99% of UI work box-shadow is the right choice — better browser support, more GPU optimisation.

When should I use inset shadows?

Inset shadows draw inside the element rather than outside. Use for input fields (to show focus or depressed state), pressed buttons, inset wells, and neumorphic UI components (combining one light and one dark inset shadow).

CSS Box Shadow Generator — Free Online Tool

Home/Design Tools/Box Shadow Generator

Preview Element180 × 180 px

// Generated CSS

box-shadow:
  0px 8px 30px 0px rgba(129, 140, 248, 0.45),
  10px 10px 30px 0px rgba(244, 114, 182, 0.35);

What Is CSS Box Shadow?

box-shadow is a CSS property that draws one or more shadow effects around any element's border box. It's the foundation of depth in modern UI design — used for cards, buttons, modals, dropdowns, tooltips, and any element that needs to "lift" off the page. The syntax is box-shadow: x-offset y-offset blur spread color, with an optional inset keyword to draw inside the element instead of outside.

Box Shadow Generator Online — What This Tool Does

This free CSS box-shadow generator lets you visually design single-layer or multi-layer shadows and copy production-ready CSS. Adjust X/Y offset, blur, spread, colour, and opacity per layer. Switch between outer and inset shadows. Pick from 8 presets covering common UI elevations (card, popover, modal, hard, glow). Preview against 4 background colours to test how the shadow reads on different surfaces.

How to Build a Box Shadow

Adjust the X Offset and Y Offset sliders to position the shadow.
Increase Blur Radius for a softer shadow, decrease for sharper edges.
Use Spread Radius to grow (positive) or shrink (negative) the shadow.
Pick a Colour and adjust Opacity independently.
Toggle Inset to draw the shadow inside the element.
Click + Add Shadow Layer to stack multiple shadows for richer depth.
Switch the preview background to test on light, dark, or coloured surfaces.
Click Copy CSS to grab the full box-shadow declaration.

Box Shadow Properties Explained

X Offset — horizontal distance. Positive = right, negative = left.
Y Offset — vertical distance. Positive = down, negative = up. Typical UI shadows use a small positive Y (1–4px) to simulate light coming from above.
Blur Radius — higher values make the shadow softer and more spread out. 0 is sharp, 20+ is very diffuse. Most UI shadows use 4–16.
Spread Radius — positive values grow the shadow uniformly, negative values shrink it. Negative spread can produce "tight" shadows that hug an element closely.
Colour + Opacity — typically use semi-transparent black (e.g. rgba(0,0,0,0.1)) so the shadow blends with any background. Stronger opacity for hard shadows, weaker for soft elevation.
Inset — switches from an outer shadow to an inner shadow drawn inside the element's border. Used for input fields, pressed buttons, and inset wells.

Multi-Layer Shadows for Realistic Depth

CSS allows multiple comma-separated shadows on one element. Real-world shadows have multiple components: a tight close shadow (1–2px blur) for contact with the surface, plus a wider diffuse shadow (16–24px blur) for ambient light. Stacking two or three layers produces dramatically more realistic depth than any single shadow. This is the secret behind Apple's, Google's, and Stripe's UI shadows — they're all multi-layered.

Common Use Cases

Card elevation — small blur, low opacity, slight Y offset. Lifts the card off the page.
Modal / dialog — large blur, higher opacity. Indicates the modal floats above all content.
Dropdown / popover — medium blur, medium opacity. Subtle but visible.
Button hover — small shadow on default state, larger on hover for interactive feedback.
Pressed button — inset shadow to look like the button is depressed.
Input focus ring — coloured shadow with 0 blur and 3–4px spread (replaces ugly default outlines).
Neumorphism — two inset shadows (one light, one dark) for the soft inset look.
Glow / aura — coloured shadow with large blur and 0 offset.

Tips & Tricks

Y-axis offset > X-axis — natural shadows fall below the element because light comes from above. Default to Y > X.
Lower opacity, larger blur for premium feel — Apple-style shadows use 0 1px 2px rgba(0,0,0,0.05) rather than 0 4px 8px rgba(0,0,0,0.2).
Use HSL alpha for thematic shadows — hsla(220, 50%, 20%, 0.15) blends better with your colour scheme than pure black.
Avoid shadow on dark backgrounds — black shadows disappear. Use a lighter colour with low opacity, or use a glow instead.
Performance — large blur values are GPU-cheap but can affect compositing on mobile. Test on real devices.
box-shadow vs filter: drop-shadow() — drop-shadow follows the actual shape (good for SVGs, PNG cutouts). box-shadow always follows the rectangular border box.

box-shadow vs filter: drop-shadow() — Which to Use?

box-shadow respects the element's border-box (the outer rectangle). Best for rectangular cards, buttons, modals, and any block element. filter: drop-shadow() follows the actual rendered shape — useful for SVGs, PNG cutouts with transparent areas, and irregular shapes. For 99% of UI work, box-shadow is the right choice; it's also better-tested across browsers and has more GPU optimisation.

Related Tools

Color Picker — pick precise colours for shadow opacity
CSS Gradient Generator — pair shadows with gradient backgrounds
Border Radius Generator — round element corners; shadow follows the radius
Contrast Checker — verify the shadow has enough contrast against background

Is My Data Sent to a Server?

No. Everything runs in your browser — the preview, the multi-layer rendering, and the CSS generation. No values, colours, or settings are uploaded or stored. The tool works offline once the page has loaded.