What does inset do in box-shadow?

The inset keyword draws the shadow inside the element's box instead of outside it, creating an inner or pressed appearance. It is commonly used for input fields, wells, and pressed buttons. Toggle Inset on any layer in this tool to switch a shadow from outer to inner.

How do I set box-shadow in Tailwind CSS?

Tailwind ships a shadow scale — shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, plus shadow-inner and shadow-none. For a custom shadow, use an arbitrary value such as shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)], writing spaces as underscores. Multiple comma-separated shadows don't work as one arbitrary class, so apply those with the style attribute or a custom theme token — the Tailwind tab in this tool outputs the right form automatically.

What is the difference between box-shadow and filter: drop-shadow()?

Both create a shadow, but they trace different shapes. box-shadow always follows the element's rectangular border box (rounded by any border-radius) and supports spread and inset. The filter: drop-shadow() function follows the element's actual alpha shape, so it is the right choice for transparent PNGs, SVG icons, and irregular cut-out shapes — but it has no spread or inset. For cards, panels, and buttons, use box-shadow; for a shadow that hugs a non-rectangular graphic, use filter: drop-shadow().

CSS Box Shadow Generator

This free CSS box shadow generator builds soft, layered drop shadows for cards, buttons, and modals with a live preview — drag the element to set the offset, stack multiple shadows, and tune blur, spread, color, and opacity. Start from a Material, neumorphism, or glow preset, then copy the box-shadow as CSS or Tailwind.

Presets:

Shadow layers

The first layer paints on top. Drag the element on the preview to move the selected shadow. Max 8 layers.

Editing layer

Offset X

Offset Y

Blur

Spread

Color

Opacity

Element size

Border radius

Element color

Background

The background matters for light or white shadows and for neumorphism.

Live Preview

drag me

Syntax

x y blur spread color: The value order
inset: Shadow inside the box
a, b, c: Comma = multiple shadows
rgba(0,0,0,.15): Soft, semi-transparent

Blur vs spread

Blur: Softens the edge
Spread +: Grows the shadow
Spread −: Shrinks / tucks under
Blur 0: Hard / sharp shadow

Layering

First on top: List order = paint order
Smooth shadow: Stack low-opacity layers
Material: 2–3 layer recipe
Neumorphism: Light + dark on same bg

Good to know

No reflow: Doesn't affect layout
Glow: 0 0 blur color
Tailwind: shadow-[…]
Clipping: Parent overflow:hidden cuts it

What is box-shadow in CSS?

The box-shadow property casts one or more shadows around an element's frame. Each shadow is written as an optional inset keyword, a horizontal and vertical offset, an optional blur radius and spread radius, and a color — for example box-shadow: 0 4px 12px rgba(0,0,0,0.15). Because the shadow is painted outside the border box, it never changes the element's size or pushes its neighbors, so it can't trigger layout reflow.

You can stack as many shadows as you like by separating them with commas, which is the secret behind soft, realistic depth. This free CSS box shadow generator writes that syntax for you while you drag the element and tune each layer, and it exports the result as CSS, Tailwind, or HTML.

How to use this generator

Drag the element in the preview to set the selected shadow's offset, or use the Offset X/Y sliders for precision. Adjust blur, spread, color, and opacity in the Shadows tab, and click Add layer to stack more shadows (the first layer in the list paints on top). Use the Box tab to change the element's size, corner radius, and color, plus the page background — important for light-colored shadows and neumorphism. Start from a preset (Material, Layered, Glow, Inset, or Neumorphism) or hit Random, then copy the CSS or Tailwind output.

Layering multiple box-shadows (Material & smooth shadows)

A single dark, blurry shadow tends to look flat and artificial. Real depth comes from layering several shadows with low opacity and increasing blur and offset — an approach often called smooth shadows. List them comma-separated, remembering that the first shadow paints on top:

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

Material Design's elevation system uses the same idea with a tuned two- or three-layer recipe per elevation level. The Material and Layered presets above drop in production-ready stacks you can fine-tune.

A few box-shadow examples to copy and adapt:

Subtle card — box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
Floating / hover lift — box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
Inset input well — box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
Focus ring / glow — box-shadow: 0 0 0 3px rgba(99,102,241,0.45);

Neumorphism & inset shadows

The inset keyword moves a shadow inside the element, creating a pressed or recessed look that's ideal for inputs, wells, and toggles. Neumorphism (soft UI) builds on this: it puts an element on a background of the same color and applies two shadows — a lighter one offset up and to the left, and a darker one offset down and to the right — so the surface appears gently extruded. Flip both shadows to inset for the "pressed" variant. The Neumorphism and Neumo Pressed presets set the matching element and background colors automatically so the effect reads correctly.

Box shadow in Tailwind CSS & browser support

Tailwind ships a ready-made shadow scale — shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, plus shadow-inner and shadow-none. For an exact custom shadow, use an arbitrary value: shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)], writing spaces as underscores. A multi-layer shadow can't be expressed as a single arbitrary class because the commas separate Tailwind classes, so apply layered shadows with the style attribute or a custom theme token — the Tailwind tab above outputs the correct form for either case. box-shadow itself works unprefixed in every modern browser and has for many years; just remember a parent with overflow: hidden will clip a child's shadow.

Note the difference between box-shadow and the filter: drop-shadow() function, which is often called a "drop shadow" too: box-shadow always follows the element's rectangular border box (rounded by any border-radius), while filter: drop-shadow() follows the element's actual alpha shape — making it the right choice for transparent PNGs, SVG icons, and irregular cut-out shapes. For panels, cards, and buttons, box-shadow is faster and gives you spread and inset control that drop-shadow() doesn't.

Building the rest of the component? Pair this with our CSS Border Radius Generator for the corners, the CSS Gradient Generator for the fill, and the CSS Flexbox and CSS Grid generators for layout — each exports ready-to-paste CSS the same way.

Frequently asked questions

box-shadow adds one or more shadows around an element. Each shadow takes an optional inset keyword, a horizontal and vertical offset, an optional blur radius and spread radius, and a color — for example box-shadow: 0 4px 12px rgba(0,0,0,0.15). It is painted outside the border box, so it never changes the element's size or pushes neighboring elements.

List several shadows separated by commas; each renders as its own layer, e.g. box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). The first shadow in the list is painted on top of the ones after it. Click Add layer in this generator to stack up to eight shadows.

The blur radius softens the shadow's edge — a larger blur makes it more diffuse, while 0 gives a hard edge. The spread radius changes the shadow's size before it is blurred: positive values grow the shadow outward and negative values shrink it, which is handy for tucking a shadow under a card so only the lower edge shows.

The inset keyword draws the shadow inside the element's box instead of outside it, creating an inner or pressed appearance. It's commonly used for input fields, wells, and pressed buttons. Toggle Inset on any layer in this tool to switch a shadow from outer to inner.

Skip a single heavy shadow. Stack two or more shadows with low opacity and progressively larger blur and offset — this layered approach, sometimes called smooth shadows, mimics how light actually falls off and looks far more natural. The Material and Layered presets above demonstrate the recipe.

Neumorphism uses two shadows on an element that's the same color as its background: a lighter shadow offset up and to the left, and a darker shadow offset down and to the right, which makes the surface look gently extruded. For a pressed variant, make both shadows inset. Use the Neumorphism preset here, which also matches the element and page colors for you.

Tailwind ships a shadow scale — shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, plus shadow-inner and shadow-none. For a custom shadow, use an arbitrary value such as shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)] (spaces as underscores). Multiple comma-separated shadows don't work as one arbitrary class, so apply those with the style attribute or a custom theme token — the Tailwind tab above outputs the right form automatically.

box-shadow is painted outside the layout box, so it never changes an element's size or pushes neighbors and can't cause reflow. If a shadow isn't visible, check that it has a non-zero offset, blur, or spread, that its color isn't fully transparent, that there's enough contrast with the background, and that a parent doesn't have overflow: hidden clipping it. box-shadow works unprefixed in every modern browser.

Both create a shadow, but they trace different shapes. box-shadow always follows the element's rectangular border box (rounded by any border-radius) and supports spread and inset. The filter: drop-shadow() function follows the element's actual alpha shape, so it's the right choice for transparent PNGs, SVG icons, and irregular cut-out shapes — but it has no spread or inset. For cards, panels, and buttons, reach for box-shadow (this generator); for a shadow that hugs a non-rectangular graphic, use filter: drop-shadow().