CSS Box Shadow Generator
Visually design CSS box-shadow with live preview. Tweak offset, blur, spread, color, and inset, then copy the ready-to-use CSS code. Free, browser-based.
All processing happens locally in your browser — nothing is uploaded
水平偏移4px
垂直偏移4px
模糊半径12px
扩展半径0px
透明度20%
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);Frequently Asked Questions
Is the generated box-shadow production-ready?
Yes. The CSS follows W3C standards and works across all modern browsers (IE9+). Paste directly into a .css file, inline style, or styled-components.
Does it support multiple stacked shadows?
Yes. Stack any number of layers (comma-separated), each with independent color, blur, spread, X/Y offset, and inset toggle — perfect for neumorphism, glass-morphism, or layered buttons.
Shadows look flat in dark mode — what can I do?
Black shadows lose contrast on dark backgrounds. Try low-opacity white shadows (e.g. `rgba(255,255,255,0.1)`) for a subtle glow, or desaturated brand colors to retain depth.