What do the box-shadow values mean?

The CSS box-shadow shorthand is: [inset] offset-x offset-y blur-radius spread-radius color. Offset-x and offset-y can be negative. Blur-radius must be ≥ 0 - larger values create softer shadows. Spread-radius expands (positive) or contracts (negative) the shadow before blurring.

What is an inset shadow?

An inset shadow is drawn inside the element's border, creating a "pressed" or "cut out" effect. Add the inset keyword before the offset values.

Can I have multiple shadows?

Yes. CSS box-shadow accepts a comma-separated list of shadows. Shadows are rendered front-to-back - the first shadow in the list appears on top. Use this to combine inner glows with outer drop shadows, or to simulate layered depth.

How do I convert box-shadow to Tailwind?

Tailwind includes preset shadows (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl). If your shadow matches one of those presets, the tool outputs the class name. For custom shadows, it outputs an arbitrary value: shadow-[…].

CSS Box Shadow Generator

CSS box-shadow syntax

The full box-shadow syntax is:

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] <color>;

Value	Description
`inset`	Optional. Makes the shadow appear inside the box.
`offset-x`	Horizontal offset. Positive moves right, negative moves left.
`offset-y`	Vertical offset. Positive moves down, negative moves up.
`blur`	Blur radius in px. 0 = sharp edge. Larger = softer shadow.
`spread`	Spread radius. Positive expands, negative contracts the shadow.
`color`	Any CSS color value. Use rgba() for transparency.

Multiple shadows

You can stack multiple shadows by separating them with commas. The first shadow listed appears on top. This is useful for layered depth effects or combining an outer drop shadow with an inner highlight.

Neumorphism pattern

Neumorphism (soft UI) creates a pressed-into-surface or raised-from-surface effect by pairing two shadows in opposite directions - one light, one dark - with matching background colors:

/* Raised neumorphic element */
box-shadow:
  6px 6px 12px rgba(0,0,0,0.2),
  -6px -6px 12px rgba(255,255,255,0.7);

/* Pressed/inset neumorphic element */
box-shadow:
  inset 4px 4px 8px rgba(0,0,0,0.2),
  inset -4px -4px 8px rgba(255,255,255,0.7);

The element's background must closely match the container background for the illusion to work.

Design system shadow scale

Most design systems define a consistent shadow ramp. Here is a scale inspired by Tailwind CSS that you can adapt:

Token	CSS value	Use
`shadow-sm`	`0 1px 2px rgba(0,0,0,0.05)`	Subtle lift on cards
`shadow`	`0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)`	Default card shadow
`shadow-md`	`0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)`	Dropdowns, popovers
`shadow-lg`	`0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)`	Modals, dialogs
`shadow-xl`	`0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)`	Full-screen overlays
`shadow-inner`	`inset 0 2px 4px rgba(0,0,0,0.06)`	Input focus, pressed states

Performance

box-shadow is composited by the GPU and does not trigger layout or paint on surrounding elements. This makes it safe to animate - use CSS transitions or @keyframes on box-shadow for smooth hover effects without performance concerns. (Contrast this with filter: drop-shadow(), which can trigger repaints on complex shapes.)