🔲 CSS Box Shadow Generator

Complete Guide: CSS Box Shadow Generator

The CSS Box Shadow Generator provides a visual interface for composing box-shadow declarations with a live preview. Adjust offsets, blur, spread, colour, and opacity by dragging sliders, then copy the generated CSS to your project. Multiple shadow layers are supported for advanced effects like neumorphism and Material Design elevation.

The box-shadow Syntax

The full syntax for a single shadow is:

box-shadow: [inset] h-offset v-offset blur spread color;

• h-offset — Horizontal position. Positive values move the shadow right; negative values move it left.
• v-offset — Vertical position. Positive values move the shadow down; negative values move it up.
• blur — Blur radius. Zero produces a hard-edged shadow; higher values produce softer, more diffuse shadows.
• spread — Expands or contracts the shadow. A positive value makes the shadow larger than the element; a negative value shrinks it.
• color — Any valid CSS colour, including rgba() for transparency and hsl() for perceptual precision.
• inset — Moves the shadow inside the element's border, creating a recessed or inset look.

A typical card shadow:

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

Multiple Shadows with Comma Separation

CSS allows any number of shadows on a single element by comma-separating them. Shadows are applied front to back — the first in the list appears on top. This is how realistic elevation effects are built: a tight, dark shadow close to the element combined with a wider, lighter shadow at a distance mimics how real objects cast light.

Creating Neumorphism

Neumorphism (soft UI) uses two opposing shadows — one light and one dark — applied to a background-matching element colour. This creates the illusion that the element is extruded from or pressed into the surface:

/* Light source from top-left */
box-shadow:
  6px 6px 12px rgba(0, 0, 0, 0.15),
  -6px -6px 12px rgba(255, 255, 255, 0.7);

The effect only works when the element colour closely matches the page background. Use the generator's colour picker to dial in the exact value.

Card Elevation Systems

Material Design defines a layered elevation system with 24 depth levels, each with a precisely specified shadow recipe. You do not need all 24 in practice — most design systems implement 3 to 5 levels: resting, raised, floating, modal, and overlay. The generator lets you match these values by eye and export them as CSS custom properties for use in a design token system.

The Inset Keyword

Adding inset moves the shadow to the inside of the element. This is ideal for creating pressed button states, input field focus rings that appear sunken, or text input backgrounds with a subtle depth indicator. Inset and outset shadows can be combined on the same element:

box-shadow:
  0 2px 4px rgba(0,0,0,0.2),          /* outer drop shadow */
  inset 0 1px 2px rgba(0,0,0,0.15);   /* inner pressed effect */

Performance: Composite Layer vs Repaint

Box shadows trigger a repaint when they change, not just a composite. This matters for animated shadows — animating box-shadow directly forces the browser to repaint the layer on every frame, which can drop frame rates on complex pages. The performant alternative is to animate the opacity of a pseudo-element with a pre-rendered shadow, keeping the animation on the compositor thread.

Browser Prefix History

You may encounter legacy code using -webkit-box-shadow or -moz-box-shadow. These prefixes have not been required since approximately 2012. All modern browsers support the unprefixed box-shadow property. The generator outputs only the standard, unprefixed declaration.

Related Tools

For glassmorphism UI effects that combine blur, transparency, and borders with shadows, see the CSS Glassmorphism generator. To pair your shadow layers with gradient backgrounds, the Gradient Generator is the ideal companion.