box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);shadow-[0px_4px_12px_0px_rgba(0,_0,_0,_0.15)]The CSS box-shadow property, defined in the CSS Backgrounds and Borders Level 3 specification, renders one or more shadow layers behind or inside an element. Each layer is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Layering multiple shadows produces the realistic depth effects seen in Material Design, Apple's Human Interface Guidelines, and modern design systems. Getting the values right by trial and error in DevTools is slow — a visual editor with live preview across light, gray, and dark backgrounds collapses that iteration loop.
Each shadow layer is represented as a data object with six properties: offsetX, offsetY, blurRadius, spreadRadius, color (in hex with alpha), and inset (boolean). The CSS output assembles these into the comma-separated box-shadow syntax: "X Y blur spread color, X Y blur spread color, ...". Multiple layers are rendered in back-to-front order — the last layer in the list appears behind all others.
The live preview renders the shadow on a white card element placed over three background panels (white, light gray, and dark) so you can verify readability across common interface contexts. Shadow colors rendered over dark backgrounds require higher opacity to remain visible, and the dark preview panel surfaces this issue immediately.
Tailwind arbitrary value output wraps the full box-shadow value in shadow-[...] syntax. Since Tailwind's arbitrary value parser treats commas as argument separators in some contexts, multi-layer shadows are wrapped in underscores and the output includes a usage note.
A frontend engineer building a card component adjusts blur and spread values in the generator until the shadow matches the design specification from Figma.
A developer creates an inset shadow effect for a pressed button state to simulate physical depth without using images.
A designer generates layered shadows for three elevation levels (low, medium, high) and exports the CSS values to add to the project's design token file.
A developer tests how a card shadow reads over both a white and dark background before finalizing the design system's elevation tokens.
Adjust horizontal/vertical offset, blur, and spread using the sliders
Pick a color and opacity for the shadow, toggle inset if needed
Add up to 4 shadow layers for complex effects, or choose a preset
Copy the generated CSS or Tailwind arbitrary value code
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29