Box Shadow Generator
Build beautiful CSS box shadows with a visual editor — adjust X/Y offset, blur, spread, color, opacity, and layer multiple shadows.
Preview
CSS Code
box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.2);
Shadow Layers
Presets
Related Articles
Learn more about this topic
Related Tools
You might also find these useful
Everything you need to know
Visual Shadow Editor
See your shadow update in real time as you drag sliders for X offset, Y offset, blur radius, and spread. The preview panel shows the exact result — no guessing required.
Multi-Layer Shadows
Click "Add Layer" to stack multiple shadows. Each layer has independent controls for offset, blur, spread, color, and opacity. Layered shadows create more realistic, material-design-style depth.
8 Built-In Presets
Start with presets like Soft, Elevated, Glow, Neumorphism, or Card, then customize every parameter. Presets are a fast way to learn what makes a shadow look great.
Inset Shadows
Toggle the inset checkbox on any layer to flip the shadow inside the element. Combine inset and outer shadows for advanced effects like pressed buttons or recessed panels.
One-Click CSS Copy
The generated box-shadow CSS is displayed at the bottom and ready to copy with one click. Paste directly into your stylesheet — it works in all modern browsers.
Related Tools
Build gradient backgrounds with the CSS Gradient Generator, match shadow colors using the Color Palette Generator, or convert color formats with the Color Converter.