Shadow Generator
Build a CSS box-shadow with live preview.
Calculated locally in your browser.
- See the shadow on a real element as you adjust each value.
- Stack multiple shadow layers in the UI itself — no hand-editing comma-separated CSS.
- One-click Material Design elevation (1–5) or Tailwind (sm–2xl) presets as a starting point, editable afterward like any other layer set.
- Colour plus opacity are combined into a single `rgba()` for you.
- Inset toggle for inner shadows; copies a ready-to-paste `box-shadow:` line.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Builds a CSS box-shadow visually — horizontal and vertical offset, blur, spread, colour, opacity and an inset toggle, with support for multiple stacked shadow layers — with a live preview and a copyable declaration. Start from scratch or from a Material Design elevation or Tailwind shadow-scale preset.
How to use it
- 1Optionally pick a Material or Tailwind preset to start from.
- 2Adjust offset X/Y, blur, spread, colour and opacity for the selected layer.
- 3Click "Add layer" to stack another shadow — a new layer starts bigger, softer and fainter than the one it's added from, since that's what produces realistic depth.
- 4Toggle Inset for an inner shadow.
- 5Copy the generated `box-shadow` declaration, which combines every layer.
Tips
- Keep opacity low (10–25%) and blur generous for a natural shadow — hard, dark shadows tend to look artificial. For the most realistic depth, use two or three layers: a small, tighter, slightly darker shadow close to the element, plus a larger, softer, fainter one behind it. A preset is a fast way to see this in practice before tuning your own.
Frequently asked questions
What people use it for
Add depth to cards and buttonsDial in a soft drop shadow and copy it into your component CSS.
Match Material Design's elevation systemPick a Material elevation preset (1–5) for a shadow that matches Google's published spec, then tweak from there if needed.
Match Tailwind's shadow scale outside a Tailwind projectPick a Tailwind preset (sm–2xl) to get the exact same shadow values in plain CSS.
Build realistic layered depth from scratchStack a tight, darker shadow with a larger, softer, fainter one behind it — the technique real elevation systems use, built directly in the UI.
Create an inner shadow for inputs or wellsUse the inset toggle for a recessed look.
Related tools
All design toolsCSS Gradient GeneratorBuild a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.Border Radius GeneratorBuild a CSS border-radius, with independent corners.Glassmorphism GeneratorBuild a frosted-glass CSS panel visually — tint, blur and border, with a live preview.Color PickerPick a color from anywhere on your screen, or enter one manually — HEX, RGB, HSL, CMYK, OKLCH.
Ready to use Shadow Generator?
Shadow Generator