1. css
  2. /properties
  3. /box-shadow

box-shadow

Definition

The box-shadow property in CSS allows you to add a shadow effect to an element's box. The box-shadow property accepts additional parameters, such as box-shadow: h-offset v-offset blur spread color inset;, where h-offset and v-offset are the horizontal and vertical offset respectively, blur is the blur-radius, spread is the spread-radius, color is the color of the shadow and inset is used to specify an inner shadow.

Examples

This will add a 5px offset horizontally and vertically, a 5px blur radius, and a black color (#000) to the box:

box-shadow: 5px 5px 5px #000;

This will add two shadows to the box: one with a 10px offset horizontally and vertically, a 5px blur radius, and a gray color (#888888), and another with a -10px offset horizontally and vertically, a 5px blur radius, and a white color (#ffffff):

box-shadow: 10px 10px 5px #888888, -10px -10px 5px #ffffff;

This will add an inner shadow to the box, with a 5px offset horizontally and vertically, a 5px blur radius, and a black color (#000):

box-shadow: inset 5px 5px 5px #000;

Values

ValueDescription
offset-xThe horizontal offset of the shadow. A positive value places the shadow to the right of the box.
offset-yThe vertical offset of the shadow. A positive value places the shadow below the box.
blur-radiusThe blur radius. A larger value will make the shadow more diffuse.
spread-radiusThe size of the shadow. A positive value will make the shadow bigger, and a negative value will make it smaller
colorThe color of the shadow. Can be specified as a color name, a hex code, or an RGB value.
inset(Optional) Changes the shadow to an inner shadow.

Best Practices

  • Use subtle shadows: Avoid using overly large or intense shadows, as they can be distracting and make the design look cluttered. Instead, opt for subtle shadows that add depth and dimension to your elements without overwhelming them.
  • Use the correct direction: Shadows should be used to indicate the direction of light. If your design has a light source, make sure that the shadows match the direction of that light source.
  • Use appropriate blur radius: The blur radius should be set according to the distance of the element from the viewer. Elements that are further away should have larger blur radius.
  • Use appropriate spread radius: The spread radius should be used to make the shadow more natural. It should be set according to the size of the element.
  • Use inset shadow wisely: Inset shadow is used to create an inner shadow effect. It is best used for creating the illusion of depth for buttons, inputs and other interactive elements.
  • Use multiple shadows: When necessary, use multiple shadows to create more depth and realism. A good example is using a hard shadow and a soft shadow together to create a more natural look.
  • Keep accessibility in mind: Be mindful of the contrast ratio between the shadow color and the background color, as low contrast can make it difficult for users with visual impairments to see and interact with the element.
  • Use CSS Variables: If you are using multiple box-shadows, consider using CSS variables to make your code more maintainable.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes