🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
CSS Box Shadow Generator
Adjust offset, blur, spread, color and opacity with sliders, stack several layers for soft realistic shadows, and copy the CSS or Tailwind class.
Presets
CSS
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.2);
Tailwind class
shadow-[0px_10px_25px_-5px_rgba(0,0,0,0.2)]
Layers
Preview
When should you use the Box Shadow Generator?
- Designing card, button and modal shadows
- Creating soft layered shadows that look natural
- Converting a shadow into a Tailwind arbitrary class
How to use the Box Shadow Generator
- 1
Start with a preset
Soft, Subtle, Layered, Floating, Sharp, Inset or Glow.
- 2
Adjust the layer
Change offsets, blur, spread, color and opacity, or make it inset.
- 3
Add layers
Stack shadows — a tight one plus a wide, faint one looks most natural.
- 4
Copy
Copy the CSS box-shadow or the Tailwind class.
Examples
Soft preset
Layer
x 0 · y 10 · blur 25 · spread -5 · black at 20%
CSS
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.2);
Common errors and how to fix them
The shadow looks harsh- Lower the opacity to 10–20% and increase blur, or add a second, larger and fainter layer.
The shadow is clipped- A parent with overflow: hidden cuts off shadows. Add padding to the parent or remove the overflow.
More from Design & Color
Free tools that run in your browser — no signup, nothing uploaded.
Color Picker & Converter
Pick a color and convert between HEX, RGB and HSL instantly.
Color Palette Generator
Generate harmonious color palettes and export them as CSS, Tailwind or JSON.
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
PX to REM Converter
Convert pixels to rem and rem to pixels for any root font size.
CSS Border Radius & Blob Generator
Set rounded corners per side or make organic blob shapes, then copy the CSS.
Glassmorphism CSS Generator
Create frosted-glass UI cards with backdrop blur and copy the CSS.
CSS Clamp() Fluid Size Calculator
Generate clamp() values for fluid typography and spacing between two screen sizes.
CSS Text Shadow Generator
Build CSS text shadows — soft, neon, outline or retro — and copy the code.
JSON Auto-Fixer & Formatter
Repair, validate, and beautify broken JSON (missing quotes, trailing commas).
Box Shadow Generator FAQ
In order: horizontal offset, vertical offset, blur radius, spread radius and color — plus inset for inner shadows.
Positive spread grows the shadow beyond the element; negative spread shrinks it, which helps soft shadows look like they sit under the element.
Yes. Separate them with commas — the first is drawn on top. Layered shadows look more realistic.
Copy the Tailwind class, which uses an arbitrary value like shadow-[0px_10px_25px_-5px_rgba(0,0,0,0.2)].
No. Shadows don't take up space or move other elements.
No. Everything runs in your browser, so your data never leaves your device.