ToolHive

CSS Box Shadow Generator

Design beautiful box shadows visually and grab the CSS instantly.

box shadow generatorcss shadow generatordrop shadow generator

Interactive Generator

Horizontal Offset (x)10px
Vertical Offset (y)10px
Blur Radius15px
Spread Radius0px
Shadow Opacity20%
Shadow Color
#000000
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.2);

Intro

Stop guessing CSS shadow values.

Use intuitive sliders to adjust offset, blur radius, spread, and opacity to craft the perfect box shadow for your components.

How to use

  1. Adjust Sliders
    Move the X, Y, blur, and spread sliders.
  2. Pick Color
    Select a shadow color and tweak the alpha opacity.
  3. Grab the Code
    Copy the generated box-shadow CSS rule.

Examples

Soft Drop Shadow
A common elegant card shadow.
Input
y=10, blur=15, opacity=0.2
Output
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);
Inset shadow
Create an inner shadow effect for depressed UI elements.
Input
inset 2px 2px 4px rgba(0,0,0,0.3)
Output
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);

FAQ

What CSS properties does box-shadow use?

Box-shadow uses offset-x, offset-y, blur-radius, spread-radius, color, and an optional inset keyword. Multiple shadows can be layered with comma separation.

Can I create multiple shadows?

Yes, you can layer multiple box-shadow values separated by commas to create complex effects like glowing borders or stacked depth illusions.

Does box-shadow work in all browsers?

Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer 9+ also supports it with some limitations.

Related tools

Related guides

  • No related guides in the current seed set.