CSS Box Shadow Generator
Shadow
Advertisement
CSS Box Shadow Syntax
The box-shadow property adds shadow effects around an element's frame. You can layer multiple shadows by separating them with commas, enabling sophisticated depth and glow effects.
Box Shadow Parameters
- offset-x: horizontal shadow offset (positive = right, negative = left)
- offset-y: vertical shadow offset (positive = down, negative = up)
- blur-radius: softness of the shadow (0 = hard edge; larger = softer)
- spread-radius: size adjustment (positive = larger shadow, negative = smaller)
- color: shadow color — use rgba() for transparency control
- inset: keyword to make the shadow appear inside the element
Design Patterns Using Box Shadow
- Glow effect: 0 offset, high spread, semi-transparent color:
box-shadow: 0 0 20px rgba(100,149,237,0.5); - Neumorphism: two shadows with light and dark offsets in opposite directions
- Hard shadow:
box-shadow: 4px 4px 0px #000— no blur, solid offset for flat design - Elevation: multiple stacked shadows to simulate depth layers (Material Design)
How do I animate a box shadow on hover?
Add a transition on the element: transition: box-shadow 0.3s ease;, then define a different box-shadow in the :hover state. For performance-critical animations, use transform: translateY(-2px) alongside box-shadow change — transform is hardware-accelerated while box-shadow is not.
What is the difference between box-shadow and drop-shadow filter?
box-shadow follows the box model (rectangular frame). CSS filter: drop-shadow() follows the actual shape of the element, including transparent areas — useful for PNG images and SVGs. For complex shapes: use filter: drop-shadow(). For rectangular cards: use box-shadow.