CSS Box Shadow Generator

The <code>box-shadow</code> property adds shadow effects around an element's frame. It accepts five values: optional <code>inset</code> keyword, horizontal offset, vertical offset, optional blur radius, optional spread radius, and color. Multiple shadows can be comma-separated to stack them. Box-shadow has been supported in every major browser since IE9 (2011), making it safe to use without fallbacks in modern work.

Yes. CSS <code>box-shadow</code> accepts a comma-separated list of shadow values: <code>box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);</code>. Shadows render back-to-front — the first in the list sits on top of the others. Layering 2-3 shadows with slightly different blurs and opacities produces far more realistic depth than a single large shadow, because real-world objects cast diffuse ambient shadows plus a tighter directional one.

The <code>inset</code> keyword moves the shadow inside the element instead of outside it. The visual result is an inner shadow, as if the element were recessed into the page. Common uses include pressed-button states, text input fields, and decorative pits or grooves. You can mix inset and outer shadows in the same multi-shadow declaration — for example, a subtle inset for depth plus an outer shadow for elevation.

Spread is the fourth numeric value and controls how much the shadow expands (positive) or shrinks (negative) before the blur is applied. With spread of 0 the shadow matches the element's box size. A spread of 4px grows the shadow box by 4px on every side, which then gets blurred. Negative spread is useful for creating a shadow that appears to "emanate from below" the element without sticking out from the sides.

Both create shadow effects, but <code>box-shadow</code> follows the element's rectangular border box, even if the element has rounded corners or a transparent background. <code>filter: drop-shadow()</code> follows the actual alpha shape — essential for SVG icons, PNG images with transparency, or anything non-rectangular. Drop-shadow is slightly more expensive to render but produces correct results on irregular shapes. Use box-shadow for cards and buttons; drop-shadow for logos and icons.

Neumorphism ("new skeuomorphism") uses two opposing shadows — one dark, one light — to make elements look softly extruded from a mid-tone background: <code>box-shadow: 8px 8px 16px #c8c8c8, -8px -8px 16px #ffffff;</code>. The technique only works on non-white backgrounds because both the "highlight" and the "shadow" need somewhere to contrast against. Use it sparingly: neumorphic UIs often fail WCAG contrast requirements and are hard to scan quickly.

Material Design defines a ladder of elevation levels measured in density-independent pixels: 0dp (flat), 1dp (switches), 2dp (cards at rest), 4dp (app bar), 6dp (FAB at rest), 8dp (bottom sheet), 12dp (FAB pressed), 16dp (nav drawer), and 24dp (dialog). Each level has a prescribed umbra (sharp) and penumbra (soft) shadow pair. Using standard elevations keeps an interface visually consistent and signals a stable hierarchy to the user.

Box-shadow is mostly GPU-accelerated in modern browsers, but large blur radii or hundreds of shadowed elements on-screen can slow paint and compositing, especially on mobile. Animating box-shadow directly triggers repaints. For hover/focus transitions, prefer animating <code>transform</code> (scale or translate) with pre-computed shadow classes, or fade between two absolutely-positioned pseudo-elements that each carry a static shadow - both tricks sidestep repaints.

They describe the same thing. "CSS shadow maker", "shadow generator", "box-shadow generator", "box-shadow gen" and "CSS box-shadow generator" are all common search phrasings for a tool that writes the <code>box-shadow</code> declaration for you. This page covers every variant: pick offsets, blur, spread and color visually, stack multiple layers, toggle inset, and copy the resulting shadow CSS into your stylesheet. If you need shadows that follow a non-rectangular alpha shape (SVG icons, PNGs with transparency) use the CSS filter generator with <code>filter: drop-shadow()</code> instead.

The "CSS Box Shadow Examples by Elevation" section above lists production-ready snippets for Tailwind shadow-sm through shadow-2xl, Material Design elevation 4, and a soft inner-shadow trick. Each example is one-click pasteable. For surfaces, pair the shadow with a gentle background gradient from the <a href="/tools/gradient-generator/">CSS gradient generator</a>; for matching headings, use the <a href="/tools/text-shadow-generator/">text-shadow generator</a> so depth between containers and type stays consistent.

Tailwind ships five default shadow scales (sm, default, md, lg, xl, 2xl) that compose two layers each - one tight directional shadow and one soft ambient shadow. Material Design defines a 24-step ladder (0-24dp) that uses three layers (umbra, penumbra, ambient). Tailwind covers ~95 percent of UI needs and is much easier to override; Material is more physically realistic but heavier. For a brand-agnostic SaaS UI, start from Tailwind defaults and only reach for Material when you need true elevation hierarchy (e.g. a multi-pane document editor).