Loading…
Loading…
Design beautiful CSS shadows with a visual editor
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);shadow-[0px_4px_12px_0px_rgba(0,_0,_0,_0.15)]Run your projects on Claude 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 — $29The 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
About the CSS Box Shadow Generator
The box-shadow property takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. You can stack multiple shadows separated by commas.
An inset shadow appears inside the element instead of outside. Add the "inset" keyword before the shadow values to create an inner shadow effect.
Yes. The tool generates Tailwind arbitrary value syntax like shadow-[...] that you can paste directly into your className.
Up to 4 shadow layers. Layering multiple shadows creates depth and realism — for example, a subtle shadow for ground contact plus a larger one for elevation.
Blur radius controls the softness of the shadow edge — a higher value creates a more diffuse shadow. Spread radius expands or contracts the shadow's base size before blurring. A positive spread with zero blur creates a hard border effect; a negative spread with high blur creates a soft shadow that does not extend beyond the element edges.
The generator outputs CSS values in the format Figma expects when you set a custom Drop Shadow effect. Enter the horizontal offset, vertical offset, blur, spread, and color values from the generator output directly into Figma's shadow panel for an exact match.
A two-layer approach works well for realistic elevation: a close, dark shadow (0 2px 4px rgba(0,0,0,0.12)) for the contact shadow, plus a larger, lighter shadow (0 8px 24px rgba(0,0,0,0.08)) for ambient diffusion. The presets in the generator include an Elevation preset that demonstrates this pattern.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →