CSS Box Shadow Generator
Build CSS box-shadow values visually — adjust offset, blur, spread, and color with a live preview.
CSS output
box-shadow: 0px 4px 12px 0px #00000026;Why Use PixConvert Box Shadow Generator
Visual box-shadow editor — no guessing values, just drag and preview.
Live Preview
See your shadow on a realistic card preview — updates instantly with every slider change.
Multiple Shadow Layers
Stack multiple shadow layers for advanced depth effects. Each layer is independently controlled.
Inset Shadows
Toggle inset mode for pressed-button effects and inner glow styles.
Color + Opacity
Pick any shadow color with a separate opacity slider. Output uses rgba for precise transparency.
Ready CSS Output
Output is a valid box-shadow CSS value string — paste directly into your stylesheet or design token.
100% Private
Pure client-side — no server, no data collection.
Box Shadow Use Cases
Shadows create depth and hierarchy in UI design.
Card Elevation
Create Material Design-style elevation shadows for cards, modals, and panels.
- Elevation 1-24 shadow scales
- Floating action button shadows
- Dialog overlay shadows
Button Depth
Add subtle drop shadows and inset pressed effects to buttons for 3D depth.
- Subtle drop shadow on hover
- Inset shadow for pressed state
- Colored glow effects
Neumorphism
Build neumorphic UI components using layered light and dark shadows.
- Light + dark shadow layers
- Soft UI raised elements
- Inset concave controls
How to Create a Box Shadow
Adjust X offset, Y offset, blur radius, and spread using the sliders. Pick a shadow color and opacity.
See the live preview update instantly. Copy the CSS value and paste it into your stylesheet.
Toggle inset shadows or stack multiple shadows to build layered effects — output is comma-separated and ready to paste.
Explore More Tools
Discover other free tools that work great alongside this one
CSS Gradient Generator
Build custom CSS gradients visually
Contrast Checker
Check color contrast ratios for WCAG compliance
Color Converter
Convert HEX, RGB, and HSL color codes instantly
Color Palette Extractor
Extract dominant colors from any image
JSON Formatter
Format, validate, and minify JSON instantly
Regex Tester
Test and debug regular expressions live
Frequently Asked Questions
CSS box-shadow explained.
What are the box-shadow parameters?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X/Y offset: shadow position. Blur: softness (0 = hard edge). Spread: size expansion (negative = smaller). Inset: draws shadow inside the element.
How do I create a soft shadow?
Increase blur radius (20-40px), keep spread near 0, and use a low opacity color (rgba(0,0,0,0.1-0.2)). Offset slightly (y: 4-8px). This creates the modern 'soft drop shadow' common in design systems.
Can I stack multiple shadows?
Yes. CSS accepts multiple comma-separated shadow values: box-shadow: shadow1, shadow2, shadow3. Use the 'Add shadow layer' button to build layered effects like neumorphism or multi-colored glows.
What's the difference between blur and spread?
Blur controls how soft the shadow edge is — higher blur = more diffuse. Spread controls the shadow's size — positive spread makes the shadow larger than the element, negative spread makes it smaller. Spread does not affect blur.
Does box-shadow affect layout?
No. box-shadow is rendered outside the box model and does not affect element size, position, or document flow. If you need space around the element for the shadow, use margin or padding instead.