The box-shadow property in CSS is used to put a shadow in HTML elements (sometimes referred to as “drop shadows”, ala Photoshop/Figma).
.box {
Box-shadow: 0 3px 9px rgb(0 0 0/0.3);
}
The syntax is:
Box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Attributes of CSS Box Shadow Property
The box-shadow property takes five values: offset-x, offset-y, blur-radius, spread-radius, and color, and the crucial part is the order of each value.
- Horizontal offset (required): If set positive means the shadow will be on the right of the box. Else, if a negative value, it will put the shadow on the left of the box.
- Vertical offset (required): If set negative it means the box shadow will be put above the box, while, positive value will put it below.
- Blur radius (required): If set to 0, the shadow box will be sharp. The higher the number goes, the more blurred it will become. Also, the further the shadow of the box will extend.
- Spread radius (optional): if the value is positive, the size of the shadow will increase. While, negative value will decrease the size of the shadow. Default value is 0 (shadow is the same as blur)
- Color (required): It will add color to the box shadow and can take any color value in hex or hsla. If the color value is omitted, the box shadow is drawn in the foreground color (text color).
Tip: Use a semi-transparent color like rgba (0,0,0,0.4) as it will not hide the elements beneath it on the webpage, but will allow the element to have its own share of attention.
Learn to Code Beautiful Websites
Join Today
CSS Box-Shadow Property Values
| Value |
Description |
Example |
none |
If you can use none, then no shadow is applied. |
box-shadow: none |
h-offset |
It moves the shadow horizontally. If you give positive values, then the shadow moves to the right. Otherwise, for negative values, it goes left. |
box-shadow: 10px 0px gray; |
v-offset |
It moves the shadow vertically. If you give positive values, then the shadow moves down. Otherwise, for negative values, it goes up. |
box-shadow: 0px -10px gray; |
blur-radius |
It is optional. A higher value of this means the element is more blurred. |
box-shadow: 5px 5px 15px black; |
spread-radius |
It is also optional. It helps in shrinking or expanding the shadow. |
box-shadow: 5px 5px 10px 5px gray; |
color |
You can also set the color of the shadow. |
box-shadow: 5px 5px 10px red; |
inset |
It makes the shadow appear inside the box instead of outside. It is again an optional argument. |
box-shadow: 5px 5px 10px gray inset; |
Enough of theory, let’s do it practically!
CSS Box Shadow Examples
CSS box-shadow examples are widely used to style cards, buttons, and images. Below are practical cases showing how to apply the box shadow in CSS.
Example 1: Basic Box Shadow
This is the basic example of the box-shadow property in CSS that adds a gray shadow of 5px to the right, 10px below the box, with a 10px blur.
Output:
Example 2: Shadow with Spread Property
This example uses the spread-radius property value. The spread radius makes the shadow appear larger and extended. This helps in catching more attention of the user on the element.
Output:
Example 3: Producing Colored Shadow
This example shows you how to make a colored shadow around the border of an element using the box-shadow property in CSS. This will help the developer to highlight elements like buttons or promotional cards.
Output:
Example 4: Adding Inner Shadow
Inner shadows are very useful when you want to create a visual effect like a button that looks clicked. This example shows you how to add a CSS inner shadow using box-shadow around the box or HTML element by using the inset property of the box-shadow.
Output:
Example 5: Removing Shadow Using “none” Property
In this example, you are using the “none” value of the box-shadow property in CSS. This will completely remove the shadow effect that was previously applied to the box or HTML element.
Output:
Browsers that Support CSS Box Shadow Property
It is important to note that CSS box-shadow is not fully supported on all browsers available, especially when it comes to earlier versions. Hence, we recommend to use, browser-prefix when you are targeting older versions of the web browser.
If the browser doesn’t support box-shadow, then it will be omitted without affecting the webpage layout. This browser support data is from Caniuse, which has more details. A number indicates that the specific browser supports the feature at that version and up.
The browsers that support the CSS box shadow property are:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
Note: The box-shadow property is not supported by older versions of the Internet Explorer browser (versions below IE9).
Get 100% Hike!
Master Most in Demand Skills Now!
The CSS box-shadow property is a simple yet powerful way to enhance the visual depth of web elements. With just a few values, you can create subtle depth, glowing effects, or dramatic highlights that make your UI more engaging. Understanding how each attribute, offsets, blur, spread, and color, affects the shadow helps you design cleaner, more realistic interfaces.
For best results, experiment with semi-transparent colors (rgba) and multiple shadows to achieve creative effects. And remember, while modern browsers fully support box-shadow, always test your designs across browsers for consistent appearance.
CSS Box Shadow Property – FAQs
Q1. How to add box shadow in CSS?
In CSS, you can add a shadow to an element using the box-shadow property.
The syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread] [color];.
Q2. What is drop-shadow in CSS?
The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.
Q3. How to add box shadow only at bottom?
To add a shadow only at the bottom, set the vertical offset to a positive value and horizontal offset to 0 in box-shadow.
Example: box-shadow: 0 5px 10px rgba(0,0,0,0.3); adds a bottom-only shadow.
Q4. How to add multiple box shadows in CSS?
To attach more than one shadow to an element, add a comma-separated list of shadows.