Design Tools

CSS Box Shadow Generator

Visually design drop shadows, then copy the ready-to-use CSS. Tune offset, blur, spread, color and inset mode: everything runs locally in your browser with zero uploads.

Controls

px
px
px
px
%
Color

Preview

CSS

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);

How it works

The generator writes one CSS declaration from five controls. Each value maps directly onto the box-shadow grammar, so the copied string is valid in any stylesheet, inline style or Tailwind arbitrary property.

In the final declaration the values follow the order the specification defines: the optional inset keyword, then offset-x, offset-y, blur radius, spread radius and color. Offsets place the shadow relative to the element box, and each can be negative to flip the direction it falls. The blur radius softens the shadow edge, and larger values widen the fade so the shadow reads as ambient light rather than a hard outline. The spread radius expands or contracts the shadow shape before blurring, which is the control that makes a shadow grow beyond the element while its position stays fixed.

Two boundary rules are worth remembering. The blur radius cannot be negative, so an invalid value is dropped or treated as zero. The offsets and spread can go negative, which is how shadows shift up-left or tighten around the box.

The color control accepts hex or rgb input and converts it to an rgba() value whose alpha comes from the opacity slider. A translucent shadow lets the page background show through, and that translucency is what makes soft UI depth read as natural lighting instead of a solid silhouette. Toggling Inset moves the shadow inside the element's border box, so the effect sits within the element frame. Inset and outer shadows share the same offset, blur and spread controls, and the preview reflects every change immediately because all of the math happens in your browser.

Shadows can also stack. The property accepts a comma-separated list, and the first shadow in the list is painted on top, so layered elevation and glow effects are built from the same single declaration.

The shadow always follows the element's border box, including its border-radius. That is why a rounded card keeps a rounded shadow, and why a box-shadow on an element with a transparent background still draws the rectangle of the box rather than the shape of the content. If the design calls for a shadow that hugs an irregular silhouette, such as a logo or an image with transparency, filter: drop-shadow() is the property that follows the rendered appearance of the element instead. It derives the shadow from the element's rendered alpha channel, which is why cropped or transparent shapes keep their true outline. Choosing between the two is really a choice between a box-shaped shadow with full layout-level control and a shape-following shadow with fewer tunable values.

Use cases

Each pattern below maps to the same declaration, and most of them hinge on picking the right opacity and blur for the surface size. Large panels want a wide, faint shadow while small buttons want a tight one.

  • Elevation for cards, modals and dropdown menus.
  • Subtle depth for buttons, avatars and form fields.
  • Neumorphic / soft-UI surfaces using low-opacity dual shadows.
  • Inset shadows for wells, pressed states and text fields.
  • Glow and focus rings around interactive elements.

Layered shadows deserve a closer look. A card with one heavy outer shadow and a second faint, tighter shadow reads as higher elevation, while a weak outer glow paired with a crisp inset layer produces the pressed state used on many buttons and inputs. Because box-shadow accepts multiple comma-separated shadows, the workflow is to tune each layer here and then paste the combined declaration into the stylesheet.

Troubleshooting

Most shadow problems come from a sign mistake, a clipping parent, or a hidden shadow. Check each item below.

  • No visible shadow: check opacity, offsets and blur, and make sure no parent clips it with overflow: hidden.
  • Shadow too harsh: lower the opacity and increase the blur.
  • Shadow grows instead of shifting: spread is positive: reduce it toward 0 or negative.
  • Inset looks reversed: negative offsets push the inner shadow to the opposite side.
  • Negative spread hides the shadow: a negative spread contracts the shadow toward the element, so a large negative value can make it vanish entirely. Keep spread in roughly the −10px to −20px range for a tight, crisp edge.
  • Large blur feels sluggish: box-shadow blur is rasterized by the compositor and repainted whenever the value changes, so very large or frequently animated shadows cost real rendering time. For hover or entrance animations, animate opacity or transform on a static shadow instead of re-rendering the blur.

FAQ

What do the four values in box-shadow mean?

In order they are: offset-x, offset-y, blur radius and spread radius, followed by a color. Positive x pushes the shadow right and positive y pushes it down; blur softens the edges and spread grows or shrinks the shadow beyond the element box.

What is the difference between blur and spread?

Blur applies a Gaussian softening to the shadow edges without changing its size, while spread expands (positive) or contracts (negative) the shadow shape before blur is applied. A spread of 10px makes a noticeably larger, softer shadow.

How do I create multiple shadows?

box-shadow accepts a comma-separated list, so you can stack several shadows on one element. This is how layered elevation and glow effects are built: paste this tool’s output, then append another shadow before the semicolon.

Why can I not see my shadow?

Common causes: opacity is 0, blur and spread are 0 while offsets are also 0, or the color matches the background. Also make sure the parent container does not clip it with overflow: hidden.

How do I make an inset shadow?

Toggle the Inset switch. This places the shadow inside the element’s border box, which is typically used for pressed buttons, wells and subtle inner depth rather than elevation.

Can I use a gradient or an image as the shadow color?

No. The shadow color uses the CSS color data type, so hex, rgb(), hsl() and named colors are all valid, but gradients and images are not part of it. If you need a shadow that traces an irregular shape instead of the box frame, filter: drop-shadow() is the usual alternative, since it follows the rendered alpha of the element.

Will my blurred shadow look identical in every browser?

The specification defines the grammar, the inset behavior and the layering order, but it leaves the blur algorithm to each rendering engine. The same five values therefore produce a similar effect everywhere, yet the exact edge softness can differ slightly between engines and across screen densities. Design with a little spare blur rather than an exact pixel expectation.

The box-shadow and color specifications behind this generator

The behavior this tool relies on is defined by the web standards and reference documentation below.

  • MDN: box-shadow defines the property grammar, the inset keyword, the negative-value rules and the comma-separated layering the generator emits.
  • CSS Color Module Level 4 specifies the hex and rgb() color syntax behind the color control, including the alpha channel the opacity slider writes.
  • MDN: CSS color values documents the color data type, which is why the shadow color accepts colors but never gradients or images.
  • WCAG 2.2 covers the contrast and non-text contrast requirements that matter when a shadow is used to keep text legible on busy backgrounds.