CSS Box Shadow Generator
Design and preview CSS box shadows in real time. Adjust offset, blur, spread, color, and opacity — then copy the ready-to-use CSS instantly.
Shadow Settings
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.3);
Understanding CSS Box Shadows
The box-shadow property attaches one or more drop shadows to an element's box. It is one of the most powerful CSS tools for creating depth, elevation, and visual hierarchy — fundamental to modern UI design systems like Material Design and Apple's Human Interface Guidelines.
You can layer multiple shadows by separating them with commas, allowing designers to create nuanced, realistic lighting effects that a single shadow can't achieve.
Syntax Breakdown
The Inset Effect
Adding the inset keyword renders the shadow inside the element's border, creating a "sunken" or "pressed" appearance. This is ideal for active button states, depth-indication in card headers, and input fields that appear recessed into the UI.
Blur vs Spread
Blur radius softens the shadow's edge — higher values produce a softer, wider glow; zero produces a hard-edged silhouette. Spread radius physically expands or contracts the shadow's size before the blur is applied.
Browser Prefixes
All modern browsers support the unprefixed box-shadow. The -webkit- prefix targets very old Safari/Chrome and -moz- targets Firefox 3.5. Our generator includes them automatically for maximum legacy coverage.
Tips for Realistic Shadows
Real-world shadows are rarely pure black — they pick up the ambient colour of the environment. Try using a very dark, slightly tinted version of your background colour instead of #000000. Keep opacity low (0.1–0.25), use a moderate blur (10–30px), and nudge the Y offset slightly more than X to simulate a light source from above. Layering two shadows — one tight and dark, one wide and soft — produces dramatically more convincing results than a single shadow layer.
Frequently Asked Questions
box-shadow: 2px 2px 4px rgba(0,0,0,0.3), 8px 8px 20px rgba(0,0,0,0.15);. Layering shadows creates a much more natural, convincing depth effect than any single shadow can.
outline or border, box-shadow is rendered outside the element's box model and does not affect layout or the size of other elements. The shadow can overlap neighbouring elements without pushing them.
box-shadow directly — instead, animate opacity on a pseudo-element with the shadow already applied. This allows the browser to composite the layer on the GPU without re-painting.
box-shadow follows the rectangular bounding box of the element and ignores transparency. filter: drop-shadow() follows the actual visible shape of the element including transparent areas, making it ideal for PNG images and SVGs with irregular outlines.
border-radius: 50%, the shadow will also appear circular. For complex SVG paths, use filter: drop-shadow() instead.
box-shadow. We include them purely for legacy coverage — they cause no harm.
Check Out Other Popular Tools
Tetris Game Online
Play the classic Tetris game online for free. HTML5 Canvas based, full keyboard support, completely private, and works locally directly in your browser.
Yes/No Generator
Yes/No Generator is a digital decision-making tool that randomly selects between predetermined responses, typically "Yes" and "No."
Auto Loan Early Payoff Calculator
Calculate how much interest and time you can save by making early payments on your auto loan. See your savings instantly.
Was this tool helpful?
Comments
Loading comments...