Design

Box Shadow Generator

Shape CSS box-shadow visually in the browser. Each shadow layer exposes horizontal and vertical offset, blur, spread, color, and opacity, and you can stack several layers to build the soft, realistic depth that a single shadow rarely captures. Inset shadows, colored glows, and hard offset shadows all live in the same panel. A live preview drops onto a light or dark surface with an adjustable corner radius, so you can judge the shadow on a shape close to your real component. The output is copy-ready CSS, and everything is computed locally so nothing about your design leaves the browser.

  • Per-layer control over offset, blur, spread, color, and opacity, with a live preview
  • Stack multiple shadow layers for soft, realistic depth instead of one flat drop shadow
  • Inset shadows, colored glows, focus rings, and hard offset shadows from one set of controls
  • Preview on a light or dark surface with adjustable corner radius to match your components
  • Copy-ready CSS output, computed entirely in the browser with no upload of your work
tools/Box Shadow Generator
1 layers
Offset X0px
Offset Y8px
Blur24px
Spread-4px
Opacity18%
box-shadow
16px
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.18);
Quick actions

Overview

Bring every part of a box-shadow into one place, so you can read the depth on a real surface instead of guessing pixel values in a stylesheet. Once it looks right, copy the CSS straight back into the project.

  1. 01

    Full control per layer

    Each layer carries its own offset, blur, spread, color, and opacity, so you tune the exact direction and softness of the shadow rather than nudging a single preset.

  2. 02

    Stacked, realistic depth

    Add several layers to recreate how real light falls, where a tight near shadow and a wide ambient shadow combine into depth that one declaration cannot reach.

  3. 03

    Inset and glow in one panel

    Switch any layer to inset for pressed wells and inputs, or push blur and color outward for focus rings and neon glows, all without leaving the same controls.

  4. 04

    Light and dark preview

    Drop the preview onto a light or dark surface, because the same shadow reads very differently against cream and against near-black backgrounds.

  5. 05

    Matching corner radius

    Adjust the preview element radius and color so the shadow is judged on a shape close to the card, button, or modal it is meant for.

  6. 06

    Curated starting points

    Presets cover subtle elevation, layered cards, material steps, focus rings, brand glows, and hard offset styles, ready to apply and then refine.

How to use

Move from a rough idea to production-ready CSS in one panel, whether you are matching a design file or sketching elevation from scratch.

  1. 01

    Pick a preset close to the depth you want, or start from the default single layer.

  2. 02

    Set offset, blur, and spread for the first layer until the direction and softness feel right.

  3. 03

    Tune the color and opacity. Most natural shadows are a dark color at low opacity, not solid black.

  4. 04

    Add more layers for richer depth, or switch a layer to inset for wells, presses, and inner edges.

  5. 05

    Check the result on both light and dark surfaces with a matching corner radius, then copy the CSS.

Details

Shadows are how an interface signals elevation, focus, and grouping, so they need to be reproducible across themes, components, and the hand-off between design and engineering.

  • Supports the full box-shadow syntax: offset, blur, spread, color, opacity, and the inset keyword
  • Multiple layers combine into one declaration for soft, layered depth instead of a single flat shadow
  • Per-stop opacity keeps shadows as low-alpha color, which reads far more naturally than solid black
  • Inset mode covers pressed buttons, input wells, and inner edges that outset shadows cannot express
  • Colored layers turn into focus rings, selection highlights, and brand or neon glows when blur is widened
  • A randomize action explores fresh depth quickly once the general direction is decided
  • The preview switches between light and dark surfaces so contrast issues show up before release
  • An adjustable corner radius and element color judge the shadow on a shape close to the real component
  • All computation runs in the browser, so unreleased product UI and internal design stay private
  • Output is clean CSS that drops into stylesheets, Tailwind arbitrary values, CSS variables, and component libraries

Use cases

A shadow is rarely decoration on its own. It tells people what floats above the page, what is pressed in, and what currently has focus, and the same recipe needs to scale across a product.

  1. Cards and surfaces

    A soft, layered shadow lifts cards and panels off the page just enough to group content without the heaviness of a single dark drop shadow.

  2. Buttons and interactive states

    Rest, hover, active, and pressed states share one shadow recipe, so elevation rises and falls consistently as people interact with a control.

  3. Modals, popovers, and menus

    Floating layers need a wider, softer shadow than inline cards so they clearly read as sitting above everything else on the page.

  4. Inputs and pressed controls

    Inset shadows give text fields, toggles, and segmented controls a believable recessed or pressed feel that flat borders cannot convey.

  5. Focus rings and accessibility

    A spread-only colored shadow becomes a focus indicator that follows the corner radius, which is often cleaner than an outline on rounded elements.

  6. Brand glows and emphasis

    A colored, blurred layer draws attention to a primary action or highlighted item while staying lighter than a solid colored border.

  7. Dark-mode elevation

    Shadows fade against dark backgrounds, so checking the recipe on a dark surface helps you adjust opacity before depth disappears in dark mode.

  8. Design systems and tokens

    Stable shadow recipes become elevation tokens or CSS variables, so every surface shares the same depth language instead of one-off values.

See also

When a shadow starts from brand or token values, normalize the color first with Color Converter so opacity sits on a clean base. When the surface under the shadow also carries a gradient, design the two together using Gradient Generator so elevation and background stay consistent across the component.

Best practices

Shadows look like a quick visual choice, but they only hold up in production when direction, opacity, themes, and reuse are considered together.

  • Use a dark color at low opacity rather than solid black. Real shadows are translucent, not pure ink.
  • Keep the light direction consistent across the interface, usually a small downward offset, so depth feels coherent.
  • Two or three layers cover most elevation. A tight near shadow plus a wide ambient shadow reads more naturally than one large blur.
  • In dark mode, raise opacity or lean on lighter inner highlights, because plain dark shadows almost vanish on dark surfaces.
  • For rounded elements, prefer a spread-only colored shadow over an outline so the focus ring follows the corner radius.
  • Avoid huge blur values on large or frequently repainted surfaces, since heavy shadows raise paint cost while scrolling.
  • Promote final recipes into elevation tokens or CSS variables instead of pasting literal shadow strings into many components.
  • Document each elevation level in the design system so depth stays consistent between design files and shipped UI.

Limitations

Final rendering depends on the browser, the display, and the surrounding CSS, so standardized syntax is not a guarantee of identical perceived depth.

  • Browsers differ slightly in how they blur and composite shadows, so very soft or heavily layered shadows can look marginally different.
  • Large blur and spread on big or scrolling surfaces raise paint cost, especially on low-end devices.
  • This tool focuses on box-shadow. Text shadows, drop-shadow filters, and SVG shadows follow different syntax and behavior.
  • A shadow tuned for a light surface usually needs a separate pass for dark mode rather than reuse by default.
  • If the project enforces tokenized styling, map the output to approved elevation tokens instead of pasting literal CSS strings.
  • Shadows on transparent or semitransparent elements can interact with the background in ways the preview surface only approximates.
  • Perceived depth also depends on the element color and the surface behind it, so confirm important cases in the real layout.

FAQ

Questions that come up most often when using box-shadow in frontend work and in design collaboration, around usage, layering, themes, and practical limits.

Is the generated CSS ready for production?

Yes. The output is standard box-shadow syntax and can be dropped into stylesheets, component styles, Tailwind arbitrary values, or CSS variables without changes.

Why stack multiple shadow layers?

Real depth comes from more than one shadow. A tight, darker near shadow plus a wider, softer ambient shadow reads far more naturally than a single large blur.

When should I use an inset shadow?

Use inset for recessed surfaces such as input wells, pressed buttons, and inner edges, where the shadow should fall inside the element rather than around it.

How do I make a focus ring?

Set offset and blur to zero, give the layer a small positive spread and a brand color, and it becomes a ring that follows the corner radius of rounded elements.

Why does my shadow disappear in dark mode?

Dark shadows have little contrast against dark backgrounds. Preview on a dark surface and raise opacity, or add a subtle light inner highlight, so depth stays visible.

Should shadow color be solid black?

Rarely. Real shadows are translucent. A dark color at low opacity blends with whatever sits behind the element and looks far more natural than pure black.

Is my design uploaded while I edit?

No. All preview and CSS generation happen locally in the browser, which makes the tool safe for unreleased product UI and confidential design work.

Does it work with Tailwind?

Yes. The output fits arbitrary value syntax such as shadow- arbitrary values, and it can also land in tailwind.config under boxShadow or theme extensions.

Do shadows affect page performance?

Small shadows are cheap. Very large blur or spread on big or scrolling surfaces can raise paint cost on low-end devices, so keep heavy shadows scoped.

How do I keep elevation consistent across pages?

Promote the final recipes into elevation tokens or CSS variables and reference them in reusable components instead of repeating literal shadow strings.

Related tools

A shadow is one step in building depth and color into an interface. Pair it with color conversion and gradient design to move from normalized color values through elevation into a consistent, shipped surface.