{"id":13974,"date":"2011-08-31T20:04:36","date_gmt":"2011-09-01T03:04:36","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13974"},"modified":"2022-09-22T14:57:18","modified_gmt":"2022-09-22T21:57:18","slug":"box-shadow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-shadow\/","title":{"rendered":"box-shadow"},"content":{"rendered":"\n

The box-shadow<\/code> property in CSS is for putting shadows on elements (sometimes referred to as “drop shadows”, ala Photoshop\/Figma). <\/p>\n\n\n\n

.card {\n  box-shadow: 0 3px 10px rgb(0 0 0 \/ 0.2);\n}<\/code><\/pre>\n\n\n\n
That syntax is:<\/p>\n\n\n\n
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];<\/code><\/pre>\n\n\n\n
  1. The horizontal offset<\/strong> (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.<\/li>
  2. The vertical offset<\/strong> (required) of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.<\/li>
  3. The blur radius<\/strong> (required), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be, and the further out the shadow will extend. For instance a shadow with 5px of horizontal offset that also has a 5px blur radius will be 10px of total shadow.<\/li>
  4. The spread radius<\/strong> (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).<\/li>
  5. Color<\/strong> (required) – takes any color value, like hex, named, rgba<\/a> or hsla<\/a>. If the color value is omitted, box shadows are drawn in the foreground color (text color<\/code>). But be aware, older WebKit browsers (pre Chrome 20 and Safari 6) ignore the rule when color is omitted.<\/li><\/ol>\n\n\n\n
    Using a semi-transparent color like rgba(0, 0, 0, 0.4)<\/code> is most common, and a nice effect, as it doesn’t completely\/opaquely cover what it’s over, but allows what’s underneath to show through a bit, like a real shadow.<\/p>\n\n\n
    Examples<\/h4>\n\n\n