Create CSS box shadows visually. Adjust offset, blur, spread, and color with real-time preview.
Want to jump straight in? Use our free Box Shadow Generator tool directly.
Go to the Box Shadow Generator on UtilsNow. Design box shadows with a visual interface.
Use the sliders to adjust the shadow offset. Positive values move the shadow right/down; negative values move it left/up.
Set the blur radius (softness) and spread radius (size). Higher blur creates softer shadows; spread expands or contracts the shadow.
Pick a shadow color and adjust the opacity. For realistic shadows, use dark colors with 10-30% opacity.
Copy the generated box-shadow CSS property. You can add multiple shadows by stacking them for layered effects.
Use our free Box Shadow Generator tool — no signup, no uploads, works directly in your browser.
Open Box Shadow GeneratorRealistic shadows use subtle offsets (1-4px), moderate blur (8-24px), and low opacity (0.1-0.3). Avoid sharp, dark shadows for a natural look.
Yes, CSS supports multiple shadows separated by commas. Use the tool to create each shadow individually and combine them.
Inset shadows appear inside the element instead of outside, creating a recessed or pressed-in effect.