CSS Box Shadow Generator

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows, each with its own offset, blur, spread, and color.

Shadow Properties

• X Offset: Horizontal displacement of the shadow. Positive values move it right, negative values move it left
• Y Offset: Vertical displacement. Positive moves down, negative moves up
• Blur: The blur radius. Larger values create softer, more diffused shadows
• Spread: Expands or contracts the shadow. Positive values grow the shadow, negative values shrink it
• Color & Opacity: Shadow color with adjustable transparency
• Inset: Draws the shadow inside the element instead of outside

Multiple Layers

• Combine multiple shadow layers for more realistic or complex effects
• A subtle close shadow paired with a larger diffused one creates depth
• Toggle individual layers on or off to compare the effect

Tips

• Use low opacity (20-40%) for subtle, natural-looking shadows
• Match the shadow angle to other shadows on the page for consistent lighting
• Inset shadows work well for pressed-button effects and inner glows
• Avoid overly large or dark shadows — subtlety looks more professional

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.