CSS Box Shadow Generator
Design crisp, realistic UI box shadows with real-time visual controls and instant CSS code output.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.1);
How to Use the CSS Box Shadow Generator
CSS box shadows add visual depth, hierarchy, and realism to cards, modals, buttons, and navigation bars in modern web application design.
Offsets & Blur
Adjust Horizontal (X) and Vertical (Y) values to position light sources, then increase Blur Radius for softer elevation effects.
Spread & Inset
Expand or shrink shadow size with Spread Radius, or switch to Inset mode to make UI elements appear recessed into the page.
Clean Code Export
Export clean, valid CSS syntax with normalized RGBA colors ready to drop into stylesheet classes or inline styles.
Pro Tip: For modern UI design, prefer subtle shadows with higher blur radius and lower opacity (around 5% to 15%). Negative spread values (e.g., -5px) create tight floating card shadows without harsh dark edges.