CSS Box Shadow Generator
Customize box shadow offset X/Y, blur, spread, color, and inset settings with live preview.
Box Shadow Controls
Visual Preview
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.5);About CSS Box Shadow Generator
The CSS Box Shadow Generator creates soft UI drop shadows, multi-layered ambient elevations, and inset neumorphic depth effects. Customize X/Y offsets, blur radius, spread, opacity, and hex color with live interactive preview.
How to Use CSS Box Shadow Generator
Step 1
Adjust the Horizontal (X) and Vertical (Y) offset sliders.
Step 2
Set Blur radius for shadow softness and Spread radius for expansion.
Step 3
Pick shadow color and fine-tune alpha opacity slider.
Step 4
Click "Copy CSS" to paste into your stylesheet.
Practical Use Cases for CSS Box Shadow Generator
UI Card Elevation & Floating Elements
Craft subtle, realistic multi-layered shadows for cards, modals, popovers, and dropdown menus.
Neumorphism & Inset Shadow Design
Generate inset box shadows for pressed buttons, input fields, and recessed surface aesthetics.
Input & Output Examples
Creating Soft Ambient Elevation Shadow
X: 0px, Y: 10px, Blur: 25px, Spread: -5px, Color: rgba(0,0,0,0.1)
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Key Features & Performance
- ✓Multi-layer shadow stacking for realistic natural lighting effects.
- ✓Full slider controls for X-offset, Y-offset, Blur radius, and Spread radius.
- ✓Inset shadow toggle for pressed and recessed UI elements.
- ✓Hex, RGB, and RGBA opacity color picker controls.
- ✓1-Click Copy CSS box-shadow property string.
- ✓Interactive box preview with customizable background canvas color.
Key Terminology & Definitions
Box Shadow (box-shadow)
A CSS property that attaches one or more drop shadows to an element frame, creating visual elevation and depth.
Spread Radius
A positive value causes the shadow to expand in all directions; a negative value shrinks the shadow relative to the element size.