Box Shadow Generator - CSS Shadow Effects
Create beautiful CSS box-shadow effects with live preview. Adjust offset, blur, spread, color, and opacity to design perfect shadows for cards, buttons, and UI elements. Copy ready-to-use CSS code instantly.
ℹ️ Did you know? Subtle shadows create depth and hierarchy in modern UI design. Professional sites use soft shadows (10-20px blur, 0.1-0.2opacity) instead of harsh borders for cleaner aesthetics.
Shadow Parameters Explained
- Horizontal/Vertical Offset: Position shadow relative to element (0 = centered)
- Blur Radius: Softness of shadow edge (higher = softer, 10-20px typical)
- Spread Radius: Expands or contracts shadow size
- Color & Opacity: Shadow color and transparency (black 0.15 is standard)
💡 Design Tip: For modern cards use: 0px 4px 12px rgba(0,0,0,0.08). For elevated buttons: 0px 8px 24px rgba(0,0,0,0.12).
Common Shadow Patterns
- Subtle Card: 0 2px 8px rgba(0,0,0,0.05)
- Elevated Card: 0 4px 12px rgba(0,0,0,0.1)
- Button Hover: 0 8px 24px rgba(0,0,0,0.15)
- Inner Shadow: Use inset for input fields