CSS Box Shadow Generator
Free CSS box-shadow generator. Stack multiple shadow layers, set offset, blur, spread, color and inset, start from presets and copy CSS or Tailwind. No sign-up.
- No upload — 100% private
- Instant, on your device
- Free, no sign-up
- Works offline once loaded
How it works
How to use CSS Box Shadow Generator
Start from a preset such as Soft, Hard, Neumorphic or Layered, or tweak the default shadow.
Select a layer and drag the sliders — or type exact values — for offset X and Y, blur, spread and opacity.
Pick the shadow color and tick Inset for an inner shadow; add, duplicate or reorder layers to build depth.
Adjust the preview background, box color and corner radius to match your design.
Click Copy CSS, or Copy class for a ready-made Tailwind shadow-[…] utility.
Why use it
Why use our CSS Box Shadow Generator tool
Multiple layers
Stack up to 8 shadows for realistic depth; the first layer is painted on top, just like in CSS.
Every box-shadow option
Horizontal and vertical offset, blur radius, spread, color with transparency, and inset inner shadows.
Tailwind output
Get an arbitrary-value class like shadow-[0_4px_12px_0_rgba(0,0,0,0.25)] that works in Tailwind CSS v3 and v4.
Presets to start fast
Soft, hard, neumorphic, layered, inset, glow, floating and outline shadows, each with a matching preview background.
Realistic preview
Change the background, box color and corner radius to see exactly how the shadow will look on your page.
Clean, compact CSS
Unitless zeros, and rgba() only where transparency is needed — ready to paste into any stylesheet.
FAQ
Frequently asked questions
What do the four box-shadow values mean?
In box-shadow: 0 4px 12px -2px color, the values are the horizontal offset, vertical offset, blur radius and spread. Positive offsets move the shadow right and down; a negative spread shrinks the shadow so it tucks under the box.
How do I make a soft, realistic shadow?
Use a low opacity (5–20%), a large blur, a small downward offset and a slightly negative spread. Stacking two or three such layers with growing blur — like the Layered preset — looks even more natural.
What is an inset shadow?
The inset keyword draws the shadow inside the element instead of outside, so the box looks pressed in. It is popular for input fields, toggles and neumorphic designs.
How do I create a neumorphism effect?
Give the box the same color as its background, then add two shadows: a darker one offset down-right and a lighter one offset up-left. The Neumorphic preset sets this up for you.
How do I use the shadow in Tailwind CSS?
Copy the class and add it to your element, e.g. class="shadow-[0_4px_12px_0_rgba(0,0,0,0.25)]". Tailwind turns the underscores back into spaces when it generates the CSS.
Do box shadows hurt performance?
A few shadows are cheap. Very large blur values on many elements, or animating box-shadow itself, can cost paint time — animate the opacity of a shadowed pseudo-element instead.
Related tools
CSS Gradient Generator
Design linear, radial and conic gradients and copy the CSS.
Color Converter
Convert any color to HEX, RGB, HSL, HSV, CMYK and OKLCH.
Color Palette Generator
Press space for beautiful 5-color palettes. Lock, tweak, export.
Contrast Checker
Check WCAG AA/AAA contrast and fix failing colors in one click.