🌄 Box Shadow Generator
Shadow Properties
px
px
px
px
%
Box Properties
px
px
px
CSS Code
Shadow Presets
Subtle
Regular
Lifted
Floating
Elevated
Inset
Outline
Solid
ℹ️ About Box Shadows
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.
Each shadow is specified as:
box-shadow: [inset] [h-offset] [v-offset] [blur] [spread] [color];
- inset: Changes the shadow from outer to inner
- h-offset: Horizontal distance (positive = right, negative = left)
- v-offset: Vertical distance (positive = down, negative = up)
- blur: The larger the value, the bigger the blur (0 = sharp)
- spread: Positive = expand, negative = contract
- color: Shadow color (with opacity)