CSS box-shadow

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Parameters

ParametersDetails
insetby default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the frame/border.
offset-xthe horizontal distance
offset-ythe vertical distance
blur-radius0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow becomes.
spread-radius0 by default. positive values will cause the shadow to expand. negative values will cause the shadow to shrink.
colorcan be of various notations: a color keyword, hexadecimal, rgb(), rgba(), hsl(), hsla()

Remarks

Browser Support:

  • Chrome 10.0
  • IE 9.0
  • Firefox 4.0 3.5 -moz
  • Safari 5.1 3.1 -webkit-
  • Opera 10.5


Got any CSS Question?