CSS Box Shadow Generator

How to use this tool

1. Adjust the shadow. Use the number fields to set x offset, y offset, blur, and spread, then choose a color and opacity. Or select a preset to load a complete shadow stack.
2. Add more shadows. Click "Add Shadow" to stack multiple box-shadow layers.
3. Copy the CSS. Click the copy button next to the generated CSS to use it in your stylesheet.

CSS box-shadow syntax

The full box-shadow syntax is:

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

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

Tailwind CSS 3.4 provides these default shadow utilities. Select a preset above to load the complete editable stack; the named utility is copied only while every layer still matches the listed geometry, inset state, black color, and alpha:

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.)