Read me!
- If an example uses
spread
it's markedred
- Hover over the boxes to reveal only the shadow (
background: transparent
) - Supports Chrome 9+, Safari 3.2+, Firefox 3.5+ or InternetExplorer 9
- Feel free to fork this website at github.com/conceptboard
- Don't forget to visit our blog
Constant box-shadow
box-shadow: 0 0 10px #555
Plain (old)
box-shadow
box-shadow: 0 0 10px 10px #555
Add some
spread
box-shadow: 0 0 10px -10px #555
To much negative
spread=> no shadow
box-shadow only at the bottom
box-shadow: 0 10px 10px #555
Regular
box-shadowat the bottom
box-shadow: 0 10px 10px -10px #555
Negative
spreadprevents blurry sides
box-shadow: inset 0 -10px 10px -10px #555
insetworks too
inset box-shadow and multiple shadows
box-shadow: inset 0 0 10px #555
Regular
inset box-shadow
box-shadow: inset 0 0 10px -10px #555
Negative
spreadadds shadow
box-shadow: inset 0 -20px 10px -4px #555,
inset -20px 0px 10px -8px #555,
inset 0 20px 10px -16px #555,
inset 20px 0px 10px -16px #555
Multiple
box-shadows, different
spreads
box-shadow gone wild
box-shadow: 0 5px 10px 20px #fff,
0 20px 20px 10px #aaa
:hover
box-shadow: 0 -15px 5px 15px #fff,
0 -4px 10px 5px #555
box-shadow: 0 0 100px -30px #555
box-shadow: 0 0 1px 2px purple,
0 0 1px 4px blue,
0 0 1px 6px green,
0 0 1px 8px yellow,
0 0 1px 10px orange,
0 0 1px 12px red;