CSS Box Shadow Generator
Create CSS box shadows for free — no sign-up, no uploads, nothing to install. Adjust offset, blur, spread, colour, and opacity with live sliders, layer multiple shadows for realistic depth, then copy the ready-to-paste CSS in one click. Everything runs right in your browser.
Presets
Layers
Layer 1 settings
CSS output
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.2);
How It Works
This free CSS box shadow generator builds your shadow value entirely inside your browser — nothing is ever sent to a server.
-
1. Pick a preset or start from scratch
Choose one of the six built-in presets — Soft lift, Card, Long shadow, Glow blue, Inset pressed, or Layered depth — to jump straight to a polished result. Or leave the default shadow and start adjusting sliders yourself.
-
2. Adjust the shadow controls
Drag the Offset X and Offset Y sliders to move the shadow in any direction. Blur controls the softness of the edge — zero gives you a razor-sharp shadow. Spread expands or shrinks the shadow relative to the element's size. Opacity sets how visible the shadow is. Pick a shadow colour with the colour picker and toggle Inset to flip it inside the box. The preview updates instantly as you drag.
-
3. Layer multiple shadows
Click Add layer to stack a second or third shadow on the same element. Select any layer in the list to edit its settings. Layering is the secret behind natural-looking depth — a small sharp shadow for the contact shadow combined with a large soft shadow for ambient light.
-
4. Copy and use the CSS
Click Copy CSS to place the complete
box-shadow:declaration on your clipboard — ready to paste into any stylesheet, Tailwind config (shadow-[...]), CSS-in-JS, or design token file.
Why users love this tool
- Instant live preview — your shadow updates in real time as you drag sliders, no buttons to press.
- Multi-layer support — stack shadows just like professional UI designers do, without writing CSS manually.
- Copy in one click — the full CSS property is ready to paste straight into your code, no editing required.
- Your data stays private — everything runs in your browser; nothing is uploaded or stored anywhere.
- Completely free — no account, no watermarks, no limits.
How It Works: Client-Side CSS Generation
The tool assembles the box-shadow CSS string directly in the browser using standard DOM APIs —
no external libraries or server calls required.
CSS box-shadow string assembly
React state holds each shadow layer's parameters. On every state change, a pure function
converts the values into a comma-separated box-shadow string (e.g.
0px 4px 16px 0px rgba(0,0,0,0.2)), which is applied to the preview element
via an inline style attribute — instant, no canvas required.
Colour handling with rgba()
Colours picked from the native <input type="color"> arrive as 6-digit HEX.
The tool converts them to rgba() by bit-shifting the hex integer and applying the
opacity slider value as the alpha channel — giving you precise transparency control without
any colour library.
Clipboard API for instant copy
Clicking Copy CSS calls the browser's navigator.clipboard.writeText()
API. A document.execCommand('copy') fallback handles older browsers to ensure
broad compatibility.
Zero dependencies, zero uploads
The component is pure React with no third-party shadow libraries. All shadow parameters live in local component state. Once the page loads, the tool works completely offline — your inputs never leave the browser tab.
Frequently Asked Questions
Does this tool upload anything to a server?
No. The CSS Box Shadow Generator runs entirely in your browser. Nothing — your settings or the generated CSS — is ever sent to any server.
What is the difference between blur and spread?
Blur controls the softness of the shadow's edge — a higher value feathers the edge outward from the shadow's boundary. A value of zero gives a hard, sharp shadow. Spread expands (positive) or shrinks (negative) the entire shadow before blurring is applied, so a positive spread makes the shadow larger than the element itself.
What is an inset box shadow?
An inset shadow renders inside the element's border box rather than outside it. It creates a pressed-in, sunken, or recessed effect — commonly used for text inputs, toggle switches, and neumorphic UI components.
How do I layer multiple shadows?
Click the Add layer button to add a new shadow layer. Click any layer in the list to select and edit it. The generated CSS lists all shadows comma-separated, which is valid standard CSS — every modern browser renders layered box-shadows natively.
Can I use the generated CSS in Tailwind CSS?
Yes. For Tailwind v3+ you can use the arbitrary value syntax:
shadow-[0px_4px_16px_0px_rgba(0,0,0,0.2)] (replace spaces with underscores).
Alternatively, extend your tailwind.config with a custom
boxShadow key and paste the value there.
Is this tool free?
Yes, completely free. No account, no sign-up, no watermarks, and no usage limits.