Box Shadow Generator
Design CSS box-shadow values visually in your browser. Adjust offset, blur, spread, color, and inset for soft elevation, hard drop shadows, or material-style depth.
Processed in your browser · No upload
Loading tool…
All slider values stay in your browser. No styles are uploaded.
FAQ
- What's the difference between blur and spread?
- Blur controls how soft the shadow is (0 = sharp). Spread adjusts the size: positive values make the shadow bigger, negative values shrink it.
- What does the 'inset' toggle do?
- It moves the shadow inside the element instead of outside — useful for pressed buttons, carved-in input fields, or inner glow effects.
- Why are my shadows not showing?
- Make sure the preview element has overflow visible (default) and isn't clipped by a parent. Very large blur values are also slow to repaint on long pages.
Related Tools
Border Radius Generator
Visually tweak CSS border-radius. Adjust all four corners individually, pick from presets, or lock to a circle / pill. Copy the produced border-radius value straight into your stylesheet.
CSS Gradient Generator
Build CSS linear and radial gradients in your browser. Adjust angle, color stops, and copy a clean, vendor-prefix-free snippet that's ready to paste into stylesheets.
Color Converter
Convert any color between HEX, RGB, HSL and HSV — all in your browser. Use the color picker, see live previews, and copy values to use in CSS, design tools, or code.
Contrast Checker
Check WCAG 2.x color contrast between foreground and background colors. See the contrast ratio, AA / AAA pass/fail for normal and large text, and live-preview a sample sentence.