ToolNestFree CSS Box Shadow Generator
Last updated: October 12, 2026
Quick answer: The box-shadow property is six values and one headache: offsets, blur, spread, color, and inset/outset interact in ways that are nearly impossible to picture from numbers alone. This free CSS box shadow generator lets you see the shadow instead — drag the sliders for horizontal and vertical offset, blur, and spread, pick a color and opacity, toggle inset, and watch the preview update live. When it looks right, copy the clean CSS snippet straight into your stylesheet — or start from a preset (soft card, lifted, glow, hard shadow, inner) and tweak from there. Everything runs in your browser: no libraries, no signup, no waiting.
box-shadow: 10px 10px 25px 0px rgba(15, 23, 42, 0.25);
✓ Free forever · ✓ No signup · ✓ Tool inputs stay in your browser — never sent to our servers.
How to Use the CSS Box Shadow Generator
- Drag the sliders — horizontal/vertical offset, blur, spread — and watch the preview update live.
- Pick a shadow color and set its opacity; subtle dark shadows at 15–30% opacity look most natural.
- Toggle inset to push the shadow inside the box (great for pressed buttons and input fields).
- Switch the preview background to dark to check how the shadow reads on dark mode.
- Start from a preset if you're in a hurry, then tweak. Hit Copy CSS and paste the snippet into your stylesheet.
Why Use Our CSS Box Shadow Generator?
- True live preview — every slider move redraws the shadow instantly; no guesswork, no refresh.
- Full box-shadow control — offsets, blur, spread, color, opacity, and inset: every value the property supports.
- Dark-mode check — flip the preview background to dark and see whether your shadow survives the theme switch.
- One-click presets — soft card, lifted, glow, hard shadow, and inner: production-ready starting points.
- Clean copyable CSS — one line, standard syntax, works in every modern browser with no prefixes.
- Zero dependencies — vanilla JS and CSS, no libraries; the page stays fast on mobile.
Common Use Cases
- Card and modal design: Dial in the exact elevation for cards, dialogs, and popovers — soft and close for resting UI, bigger and softer for floating layers.
- Button states: Design the default, hover (slightly larger shadow), and active (inset, pressed) states of a button set with consistent shadow language.
- Dark-mode audits: Flip the preview to dark and re-tune: shadows that look subtle on white often vanish or look muddy on dark backgrounds.
- Design-system tokens: Generate the 3–5 shadow levels (sm/md/lg/xl) your design system needs, then paste them straight into your CSS variables.
- Client mockups: Show a client three shadow treatments on their hero card in seconds instead of hand-editing CSS and refreshing.
CSS Box Shadow Generator vs Alternatives
- Chrome DevTools' shadow editor: Genuinely good — the Styles panel has a visual box-shadow editor. But it's buried in devtools, the values vanish when you close the tab, and there's no preset library. This page is the same idea, bookmarkable and shareable.
- Tailwind's shadow utilities: Perfect if you're all-in on Tailwind (
shadow-lgand done). Useless for custom values, non-Tailwind projects, or when you need the raw CSS for a design handoff. - Other online shadow generators: Most cover the basics, but many are ad-heavy, lack opacity control, or can't preview on dark backgrounds. Opacity + dark preview + presets is this page's edge.
- Writing it by hand: If you can already picture
0 24px 48px -12px rgba(0,0,0,.25)in your head, you don't need this tool. For everyone else — including most professionals — seeing it beats imagining it.
If you live in Chrome DevTools, its built-in shadow editor is already in your workflow — keep it. For everyone else, or when you want presets, dark-mode preview, and a clean snippet to paste into any project, this page is the fastest way from idea to CSS.
Frequently Asked Questions
What is the box-shadow syntax order?
box-shadow: offset-x offset-y blur-radius spread-radius color; — plus the optional inset keyword first for inner shadows. Only the two offsets are required; blur and spread default to 0. This generator writes the values in exactly that order.What is the difference between blur and spread?
Blur softens the shadow's edge (higher = softer, more diffused). Spread grows or shrinks the shadow's size before blurring (positive = bigger, negative = smaller). A card shadow is usually high blur + zero spread; a glow is high blur + bright color.
What does inset do in box-shadow?
inset draws the shadow inside the element's border instead of outside — the classic 'pressed button' or sunken input look. Without it, the shadow falls outside the box (outset, the default). Toggle it on this page and watch the preview flip.Can box-shadow have multiple shadows?
Yes — comma-separate them:
box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.12);. Layered shadows (a tight one + a soft one) look far more realistic than a single shadow. This generator builds one layer at a time — generate two and join them with a comma.Does box-shadow hurt performance?
Large blurred shadows on many animated elements can cost GPU time, especially on low-end phones. For static cards and buttons it's negligible. If you're animating, prefer
transform + opacity and keep the shadow static — or swap to filter: drop-shadow() only where you need the shadow to follow a non-rectangular shape.box-shadow vs filter: drop-shadow — which should I use?
box-shadow follows the element's box (great for cards, buttons, modals). filter: drop-shadow() follows the rendered alpha shape — it wraps around transparent PNGs, SVG icons, and text. For UI panels, box-shadow (this tool) is the right call; for cutout images and icons, drop-shadow wins.