The CSS box-shadow property is instrumental in adding depth and visual interest to block-level elements through the application of drop shadows or inner shadows. This article delves into an in-depth exploration of this versatile CSS property.
Here are three distinct applications of the box-shadow property demonstrated on a typical HTML element.
Example 1: Basic Drop Shadow
Learn how to apply a delicate gray drop shadow to an element.
Example 2: Inner Shadow
An inner shadow can be achieved using the appropriate property value.
Example 3: Offset Drop Shadow
This example demonstrates casting a box shadow biased towards the bottom-right corner of the box, utilizing a horizontal offset and vertical offset of 5px.
In the event you wish to position the shadow at the top-left of the box, negative values for the horizontal and vertical offsets can be used. In the subsequent example, the horizontal and vertical offsets are set to -5px.
After examining these examples, let’s delve further into the intricacies of the box-shadow property.
The general syntax of the box-shadow property is as follows:
The box-shadow property features six possible values:
inset
horizontal offset
vertical offset
blur radius
spread distance
color
Only two values are mandatory: the horizontal and vertical offsets. The horizontal offset, vertical offset, blur radius, and spread distance must be specified using a CSS length unit (e.g., px, em, %). The color value must be a CSS color unit, such as a hex value (e.g., #000000).
Property Value Summary
Property value
Required?
Unit
Default value if not specified
inset
No
keyword
If inset is not specified, the box shadow will be outside of the HTML element.
horizontal offset
Yes
length
No default value. It must be specified.
vertical offset
Yes
length
No default value.
It must be specified.
blur radius
No
length
0
spread distance
No
length
0
color
No
color
Equal to the color property of the HTML element/s that the box shadow is being applied to.
inset
When the ‘inset’ keyword is present, the box shadow is positioned inside the HTML element.
For comparison, here is the same box shadow without the ‘inset’ property:
horizontal offset
The horizontal offset value determines the x-axis position of the box shadow. A positive value shifts the shadow to the right, while a negative value moves it to the left.
In the following example, the horizontal offset is set to 20px, which is double the value of the vertical offset (10px), thus making the shadow twice as wide horizontally.
vertical offset
The vertical offset controls the box shadow’s position on the y-axis. A positive value moves the shadow downward, while a negative value moves it upward.
In the following example, the vertical offset is -20px, which is double the length of the horizontal offset (10px), resulting in the shadow being twice as large vertically. Additionally, since the value is negative, the shadow is positioned towards the top of the box.
blur radius
The blur radius property value influences the degree of blurriness or sharpness of the box shadow.
The blur radius is optional. If not specified, it defaults to 0. It cannot be negative, unlike the horizontal and vertical offsets. A blur radius of 0 results in a sharp, solid shadow. As the value increases, the shadow becomes blurrier and more opaque.
In the example below, the blur radius is set to 20px, resulting in a highly noticeable degree of blurriness.
spread distance
The spread distance adjusts the size of the box shadow in all directions. A positive value increases the shadow size, while a negative value decreases it.
For example, due to a positive spread distance (10px), the box-shadow is 10px larger on all sides of the box, as there is no horizontal or vertical offset:
When the spread distance is negative, the shadow contracts on all sides. In the following example, the shadow is smaller than the box’s width due to its negative spread distance and the absence of a horizontal offset:
color
As the name implies, the color value determines the color of the box shadow.
It can be specified using any CSS color unit. Omitting a color value is optional. By default, if no color is explicitly stated, the shadow’s color will match the color property of the HTML element to which the box-shadow is applied.
For instance, if a paragraph element has a color of blue, the box-shadow’s color will also be blue:
To set a different shadow color, it must be explicitly declared in the box-shadow property value. Below, you can see that although the foreground color of the paragraph is still blue, the box-shadow color is red:
This CSS property allows for creative freedom by enabling the application of multiple box shadows to a single element.
The syntax is as follows:
box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];
Multiple box shadows can be achieved by separating each property value group with commas (,). In the following example, there are two box shadows: one red at the top-left and one blue at the bottom-right.
The box-shadow property is well-supported across browsers. With Internet Explorer as the baseline, support for this property dates back to IE 9, released in 2011.
A live demonstration of all the box-shadow examples in this article can be viewed by clicking the button below. View Demo 
CSS Development at Large-Scale Websites
The History of CSS Resets
A List of CSS Style Guides for Inspiration
5 CSS Effects Libraries for Supercharging Your Designs
