CSS

Box Shadow Generator

Dial in a box-shadow (or text-shadow) and copy the CSS -- presets, neumorphism (soft-UI raised/pressed), drag-to-position, multiple layers, preview background/shape, randomize, and export as CSS, Tailwind arbitrary value, SCSS, React style, or a CSS custom property.

What this tool does

Builds a box-shadow or text-shadow value visually instead of guessing offset/blur/spread numbers by hand, with support for stacked layers, neumorphism, and five different export formats.

Dialing in a shadow

X and Y offset, blur, spread, colour and opacity each have a slider and a numeric field. The preview itself can also be dragged directly to set the X/Y offset visually, watching the shadow move in real time.

Multiple layers and neumorphism

Up to 6 shadow layers can be stacked on the same element, each independently editable, for effects a single shadow can't produce — a sharp inner edge plus a soft outer glow, for example. A neumorphism toggle switches to the soft-UI look instead: a light and a dark shadow generated automatically from the preview background colour, for a raised or pressed (inset) effect.

Presets

Nine ready-made styles cover the common cases: three Material Design elevation levels, Soft UI raised and pressed, a 12-step long shadow, a pink/purple neon glow, and a hard-edged retro shadow with no blur.

Preview and export

The preview background colour and shape (box, circle, or pill) can be changed to check a shadow against different contexts, and a randomize button generates a fresh shadow instantly. The result exports as plain CSS, a Tailwind arbitrary value, an SCSS variable, a React inline style, or a CSS custom property with a fallback — copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The shadow is built and rendered entirely in the browser -- nothing is sent to a server.

Can I set the offset by dragging instead of typing numbers?

Yes -- clicking and dragging the preview box directly moves the X and Y offset, with the fields updating to match.

What is neumorphism mode?

A soft-UI look built from a light and a dark shadow generated automatically from the preview background colour, giving a raised or, with inset on, a pressed appearance -- rather than a single arbitrary shadow colour.

Can I stack more than one shadow?

Yes -- up to 6 independent layers can be added, each with its own offset, blur, spread, colour and opacity, combined into a single comma-separated shadow value.

Does it also do text-shadow, not just box-shadow?

Yes -- a mode switch changes the tool to build a text-shadow value instead, hiding the spread and inset controls that don't apply to text.

What export formats are available?

Plain CSS, a Tailwind arbitrary value, an SCSS variable, a React inline style object property, or a CSS custom property with its usage line -- selectable from a dropdown next to the code output.