A box shadow generator cheat sheet gives you the CSS box-shadow property in the exact order browsers parse it: optional inset token, horizontal offset, vertical offset, blur radius, spread radius, and an rgba color with alpha between 0 and 1. With that sequence committed to memory, you can read or hand-write a declaration such as box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25); without second-guessing which value is which. The CSS Box Shadow Generator turns those same six controls into a single deterministic declaration that updates locally in the browser as you move sliders, so the cheat sheet doubles as the operational contract: one box-shadow value, plain text on the clipboard, no style tag, no selector, no HTML fragment, no vendor prefix, and no extra shadow layer tacked onto the output. The preview and serialized declaration never leave your machine, which makes it safe to keep open while you iterate on styles for the page that actually uses the box-shadow property.

box shadow generator cheat sheet
box shadow generator cheat sheet

The box-shadow property at a glance

The CSS box-shadow property follows the grammar defined by the CSS Backgrounds and Borders Level 3 specification, and the W3C box-shadow definition spells out the same component order every browser consumes. Once you know the order, any declaration you read or write maps onto the same shape. The CSS Box Shadow Generator exposes six numeric controls plus an inset toggle, each with a documented validation bound, and emits a single plain-text declaration that mirrors the spec order exactly.

Control Range accepted by the tool How it serializes
Inset on or off Written first when enabled
Horizontal offset −200 to 200 px Right with positive, left with negative
Vertical offset −200 to 200 px Down with positive, up with negative
Blur radius 0 to 200 px Softens the shadow edge; zero produces a hard edge
Spread radius −100 to 100 px Expands (positive) or contracts (negative) before blur
Color Six-digit hexadecimal Drawn as rgba(red, green, blue, alpha)
Opacity 0 to 100% Becomes the alpha channel, rounded to at most three decimals

That table is the cheat sheet surface. It captures what the tool accepts on the input side and how each value maps onto the output side, which lets you predict the declaration before you even move a slider.

What each parameter does

The offset pair positions the shadow relative to the box edge. Positive horizontal values shift an outer shadow right, and negative values shift it left. Positive vertical values shift it down, and negative values shift it up. For an inset shadow the same offsets change the perceived direction: a positive pair reads from the top-left toward the box interior, and a negative pair reads from the bottom-right. The generator treats inset as a pure toggle rather than a separate numeric axis, which is why six sliders are enough to drive both outer and inner shadows.

Blur is non-negative. Zero produces a hard edge that mirrors the box shape plus any spread, while larger values soften and expand the visible transition without changing the explicit spread value. Spread is independent: positive spread makes the shadow bigger before blurring, negative spread contracts it. A sufficiently negative spread can make an outer shadow difficult or impossible to see, even with a generous blur. Because the two controls are separate, you can grow a tight halo by raising spread slightly and keeping blur modest, or build a diffuse cloud by leaving spread at zero and pushing blur far past the offset values.

The color control takes a six-digit hexadecimal value. The tool splits it into decimal red, green, and blue channels and writes them inside an rgba() function, then attaches the opacity slider as the alpha component. The opacity slider is therefore expressed as a value from 0 through 1, rounded to at most three decimals. A zero-alpha shadow remains a syntactically present declaration but is visually invisible, which matters when the same selector has to behave differently across states.

The inset toggle switches the shadow from an outer drop shadow to a shadow drawn inside the element's border edge. That single switch is what creates pressed controls, recessed panels, inner highlights, and depth cues from the same six numeric controls, and the recipe section below leans on it heavily.

Generate and copy a declaration

  1. Open the CSS Box Shadow Generator and look at the sample card on the preview side of the page so you have a reference for the current values.
  2. Set the horizontal and vertical offsets within the tool's ±200 px range to position the shadow where you want it relative to the box edge.
  3. Adjust the blur radius — start with a value larger than either offset so the shadow reads as soft rather than displaced.
  4. Adjust the spread radius — start at zero, then nudge positive to grow the footprint or negative to tighten the silhouette against the box.
  5. Pick a six-digit hex color and set the opacity to the percentage you want for the alpha channel; the tool rounds the alpha to at most three decimals.
  6. Toggle inset on if you want a pressed, recessed, or inner-highlight effect instead of an outer drop shadow, then re-tune the offsets because inset reverses the perceived direction.
  7. Read the declaration that appears under the sample card; the token order — optional inset, horizontal offset, vertical offset, blur, spread, rgba — matches the cheat sheet above, so you can sanity-check it without leaving the page.
  8. Copy the plain-text declaration and paste it into the CSS rule for the selector that owns the box-shadow property.
  9. Open the real component on the page where it ships and test against light theme, dark theme, the focus ring, the disabled state, and at least one real device or browser zoom that matches your audience.

Starting recipes for common cases

For reliable use, begin with modest offsets, a blur larger than the offset, zero or small spread, and low opacity — that combination keeps the shadow reinforcing the structure rather than competing with it. The exact numbers depend on the element size and the surface color underneath, so treat these as directions rather than constants and let the CSS Box Shadow Generator do the final tuning.

  • Slight elevation: a small positive vertical offset, blur several times the offset, alpha well below fifty percent, spread at zero.
  • Floating focal element: modest horizontal and vertical offsets in the same direction, blur roughly twice the offset, low alpha, slight positive spread to thicken the contact footprint.
  • Recessed panel: inset enabled, small negative spread so the inner edge feels tight against the border, blur large enough to soften the inner highlight, alpha low.
  • Soft halo: zero horizontal offset, small positive vertical offset, large blur, low alpha, zero spread — the impression is light from above without hard contact.

Each recipe is a pattern rather than a precise number, because the right values depend on the surface color, the size of the element, and the theme. Use the generator as the dial: pick the rough recipe, then fine-tune on the local preview until the sample card matches the real component.

Verify the declaration on the real component

A declaration that looks right on a sample card can read very differently on a real component over a complex background. Test the production element at the sizes it will ship at, including the smallest size where the component still has to be legible. Check light and dark themes separately, because a low-opacity black shadow disappears over a near-black background and a low-opacity white shadow disappears over a near-white background.

Test focus rings and disabled states, where the visual hierarchy still has to read clearly without the shadow carrying the meaning. Run the component under high-contrast and reduced-transparency preferences where those settings affect your audience. Browser rendering varies slightly with pixel density, transforms, zoom, compositing, and the shape of the element, so the same rgba value can look subtly different from one engine to another even when the computed CSS is identical.

For final approval, copy the declaration, paste it into the intended rule, and inspect the real element at multiple sizes against the backgrounds it will actually sit on. A dramatic shadow can reduce clarity, make a component look detached, create false hierarchy, or perform poorly over complex backgrounds, so the declaration earns its place only when it reinforces structure rather than carries meaning on its own.

What this generator does not do

The CSS Box Shadow Generator produces one box-shadow layer per visit. CSS itself supports comma-separated values to stack multiple shadows, but combining and ordering multiple layers is intentionally outside this small tool. For designs that need more than one shadow at a time, see the guide on stacking multiple CSS box-shadow layers, which covers the comma-separated syntax that this single-layer tool intentionally leaves out.

The tool also does not add legacy -webkit- or -moz- prefixes, does not detect browser targets, and does not run an autoprefixer. It does not generate text-shadow, filter: drop-shadow(), multiple elevation tokens, Tailwind classes, design-system variables, or animation keyframes. Modern browsers ship an unprefixed box-shadow property, so a missing prefix is rarely the cause of a rendering gap; the cause is almost always theme, contrast, or device variation.

Validation is silent: inputs that fall outside the bounds in the cheat-sheet table are normalized to the supported range, and a negative-zero value is written as 0 rather than -0 before the declaration is serialized. The generator does not modify project files and does not persist its controls after a reload, so each session starts at the same defaults.

  • W3C CSS Backgrounds and Borders Level 3 — box-shadow
  • CSS Box Shadow Generator