CSS Shadow Generator
Design multi-layered smooth box-shadows with offset, blur, spread, color, and inset controls.
Shadow Controls
Horizontal Offset (X)0px
Vertical Offset (Y)10px
Blur Radius30px
Spread Radius0px
Shadow Opacity15%
#000000
Popular Presets
Live Preview
Card Color:
Preview Box30px blur
CSS Box-Shadow
css
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);How It Works
The CSS box-shadow property creates shadow effects around an element's frame:
- X & Y Offsets: Define the horizontal and vertical distance of the shadow. Negative X moves left, positive right; negative Y moves up, positive down.
- Blur Radius: The higher the number, the more blurred and diffused the shadow edges become (0 creates a sharp shadow).
- Spread Radius: Positive values expand the shadow size in all directions; negative values shrink the shadow.
- Inset: Changes the shadow from an outer drop shadow to an inner shadow that sits inside the element's border.
Related Frontend Tools
Core
CSS Unit Converter
Convert rem, px, em, viewport, and physical CSS dimensions with real-time accuracy.
Popular
Color Converter
Bidirectional color conversion across HEX, RGB, RGBA, HSL, HSLA, HSV, and OKLCH.
WCAG
Color Contrast Checker
Calculate WCAG 2.1 contrast ratios and verify accessibility compliance for normal text, large text, and UI components.