snaptxt.app

Box Shadow Generator

Build CSS box-shadows visually — offset, blur, spread, inset, and stacked shadows. Live preview, ready-to-copy CSS, no signup.

CSS
Presets
Shadows
  • Layer 1
    Offset X0px
    Offset Y14px
    Blur30px
    Spread-8px

No upload, no signup.

The preview applies your CSS directly to a sample tile — no server, no canvas trickery. Your settings stay in localStorage on this device.

How to use it

  1. 1Adjust the four sliders — Offset X / Y, Blur, Spread — to shape the shadow. Negative offsets cast in the opposite direction; spread expands or contracts the shadow before the blur is applied.
  2. 2Pick a color and an opacity. Real shadows are rarely pure black at full opacity — try black at 10–25% for the most natural feel.
  3. 3Toggle Inset to push the shadow inside the element (useful for pressed buttons, neumorphic surfaces, and inset borders).
  4. 4Click Add layer to stack multiple shadows. Real-world UI shadows almost always use two layers — a tight, dark one + a wider, softer one — for depth.
  5. 5Pick a preset to start from a sensible baseline, or hit Copy CSS to grab the value.

Common use cases

  • Build a single source of truth for your app's elevation tokens (subtle / soft / medium / hard).
  • Recreate a shadow from a Figma export or screenshot by matching the layers and opacities.
  • Design a neumorphic surface — light shadow top-left, dark shadow bottom-right, both wide and soft.
  • Add a glow ring around an active button by using a single zero-offset shadow with a colored hue.
  • Test how a shadow reads on different background colors before committing to a token.

Frequently asked questions

Is any data sent to a server?
No. The preview applies your CSS directly to a sample tile in the browser — no canvas trickery, no server. Your shadow stack and color picks live in localStorage on your device so the page picks up where you left off.
What's the difference between blur and spread?
Blur softens the shadow's edges over a distance — higher values make the shadow more diffuse. Spread expands or contracts the shadow's actual size before the blur is applied — positive spread makes the shadow bigger than the element, negative makes it smaller. They're often used together: spread to set size, blur to soften.
Why do designers stack multiple shadows?
Real shadows aren't a single uniform blur. A short, slightly-dark shadow defines the close contact with the surface; a longer, lighter shadow suggests distance. Stacking the two gives a much more natural sense of depth than a single shadow ever can.
When should I use inset?
Inset shadows draw inside the element instead of outside. They're how you make a button look pressed, give a card a soft inset border, or build neumorphic concave surfaces. They also work well for inputs that need to look recessed.
Why does my shadow look harsh on dark backgrounds?
Black shadows lose contrast on dark surfaces. Try a darker background hue with higher opacity (e.g. a dark navy at 60%) or a colored shadow that picks up the surface tone. The exact black-at-25% combo that looks soft on white is almost invisible on a #1a1a1a background.
Will my box-shadow CSS work everywhere?
Yes — box-shadow has been supported by every browser since 2011. Multiple comma-separated shadows, inset, and rgba colors all work across Chrome, Firefox, Safari, Edge, and mobile equivalents.

Try next

CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually with color stops, presets, and one-click copy. Free, in your browser.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and OKLCH, and generate tint, shade, and harmony palettes. Free, in your browser.
HTML, CSS & JS Minifier
Minify HTML, CSS, and JavaScript online — strip comments, collapse whitespace, and see byte-size savings. Runs entirely in your browser.