CSS Box Shadow Generator

Build a CSS box-shadow by dragging sliders and watching a card change in real time. Each layer has its own horizontal and vertical offset, blur radius, spread, color, opacity, and an inset switch; stack up to ten layers, and the generator writes the declaration — one layer per line — plus the equivalent Tailwind arbitrary-value class, ready to paste.

Start from a preset and adjust from there:

• Soft — one wide, low-opacity shadow with negative spread: the modern "floating card" look.
• Layered (realistic) — five faint shadows whose offset and blur double each time (1, 2, 4, 8, 16px). Real light comes from soft sources and produces shadows that are dark and tight near the object and faint and wide further out; one big blur can't fake that, but a stack can.
• Crisp card and Floating — small and large elevation steps of the kind design systems use for cards and dialogs.
• Hard edge — no blur, a solid offset: the brutalist, sticker-like style.
• Neumorphic and Neumorphic pressed — a darker shade of the surface down-right and a lighter tint up-left, computed from the card color so the effect stays coherent if you change it. The preset puts the card and the page on the same surface color, because soft UI only reads when they match.
• Inset and Glow — a recessed input-field look, and a colored halo with no offset.

Already have a shadow? Paste it into Import a box-shadow in Options — px and rem lengths, hex, rgb(), hsl() (old or new syntax), and named colors all work — and edit it layer by layer.

Common uses

• Design elevation levels for cards, menus, and modals in a design system
• Convert a shadow from a design tool into clean CSS or a Tailwind class
• Create a neumorphic button or a pressed toggle state
• Turn a harsh single shadow into a smooth layered one

Example

Preset: Layered (realistic)

box-shadow:
  0 1px 1px 0 rgba(0, 0, 0, 0.075),
  0 2px 2px 0 rgba(0, 0, 0, 0.075),
  0 4px 4px 0 rgba(0, 0, 0, 0.075),
  0 8px 8px 0 rgba(0, 0, 0, 0.075),
  0 16px 16px 0 rgba(0, 0, 0, 0.075);

x 0 · y 4 · blur 6 · spread −1 · black at 10%

shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]

In a Tailwind arbitrary value, underscores stand in for spaces; commas between layers stay as they are.

Limitations

• Shadows are drawn by the browser, so heavy blurs on many elements cost rendering time on low-end phones; a few layers is plenty.
• Importing reads px, rem/em (at 16px), and unitless 0 lengths. Other units and CSS variables inside a shadow aren't supported.
• box-shadow follows the element's box. For shadows that follow the shape of a transparent PNG or SVG, use filter: drop-shadow() instead.

What do the four box-shadow values mean?

In order: horizontal offset (positive moves the shadow right), vertical offset (positive moves it down), blur radius (0 gives a hard edge; larger is softer), and spread (positive grows the shadow beyond the element, negative shrinks it). Then comes the color, and optionally the inset keyword to draw the shadow inside the box.

How do I make a realistic, smooth CSS shadow?

Layer several faint shadows instead of one strong one, doubling the offset and blur each time — for example 1px, 2px, 4px, 8px, and 16px, each at about 7% opacity. The stack is dense close to the element and fades gradually, the way shadows from soft real-world light do. The Layered preset builds exactly this.

Can I use multiple box shadows on one element?

Yes. Separate them with commas in a single box-shadow declaration. The first shadow in the list is painted on top. You can mix inset and outer shadows in the same list, which is how neumorphic pressed states and inner glows are made.

How do I make a neumorphic shadow in CSS?

Give the element the same background color as its container, then add two shadows: one a little darker than the surface, offset down and right, and one a little lighter, offset up and left, both with a generous blur. Add inset to both for a pressed look. The Neumorphic presets compute both colors from the card color.

How do I use a custom box shadow in Tailwind CSS?

Use an arbitrary value: shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)], with underscores in place of spaces. Multiple layers are separated by commas inside the brackets. The generator writes this class for you; for a reusable token, add the CSS value to your theme as --shadow-name (Tailwind v4) or under boxShadow in tailwind.config.js (v3).

What's the difference between box-shadow and drop-shadow?

box-shadow follows the element's rectangular box (including its border radius) and supports spread and inset. filter: drop-shadow() follows the visible shape of the content, so it hugs the outline of a transparent PNG or an SVG icon, but it has no spread or inset option.

Why does my shadow look too dark or dirty on colored backgrounds?

Pure black at high opacity reads as grey smudge on a colored surface. Lower the opacity and use several layers, or tint the shadow with a darker shade of the background's own hue — shadows in real scenes take on the color of the surface they fall on.