CSS Box Shadow: Syntax, Examples, and Tips

You may have noticed a soft shadow behind a box, button, or card on a website. That shadow effect is created using the box shadow in CSS, an important CSS shadow property that makes elements look three-dimensional. In this CSS box shadow tutorial, we will learn what box-shadow is, how to use it, and why it is useful in web design.

Table of contents:

• What is CSS?
• What is CSS Box Shadow
• CSS Box-Shadow Property Values
• Examples of box-shadow
  • Example 1: Basic Box Shadow
  • Example 2: Shadow with Spread Property
  • Example 3: Producing Colored Shadow
  • Example 4: Inner Shadow
  • Example 5: Removing Shadow Using “none” Property
• drop-shadow() for Transparent Content
• Best Practices
• Browser Support
• Performance Tips for Shadows
• Conclusion

What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to style the content on a webpage. It will help you change the colors, fonts, and sizes of HTML elements.

Syntax of box shadow:

p {
    color: blue;
    font-size: 18px;
}

What is CSS Box Shadow

The CSS shadow property (box-shadow) is used to add shadows around boxes like divs, buttons, images, or any other elements. The box-shadow property in CSS is used to create a 3D effect and to make cards, buttons, and images more realistic.

Syntax:

box-shadow: 5px 10px 10px yellow;

This means the shadow appears 5px to the right, 10px down, 10px blur, and of yellow color.

Learn to Code Beautiful Websites

Join Today

Explore Program

CSS Box-Shadow Property Values

To use the box-shadow property effectively, you need to understand each of its properties. Here is the list of all the properties of the box-shadow in CSS:

Examples of box-shadow

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:

drop-shadow() for Transparent Content

While box-shadow applies a shadow to the entire rectangular box of an element, it doesn’t account for transparency, so even transparent areas will still get a shadow. This can make shadows look unnatural for non-rectangular or PNG/SVG images with transparent backgrounds.

This is where CSS filter drop-shadow() comes in. Unlike box-shadow, it applies the shadow based on the actual visible pixels of the element. This makes it perfect for circular images, irregular shapes, or icons with transparency.

Syntax:

.element {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

Example:

Output:

Best Practices

Using box-shadow can help you improve the appearance of elements on the website. Here are some important points that you need to remember while working with the box-shadow in CSS:

• Avoid adding dark shadows unless they are required.
• Test the box shadow on different screens because the CSS box shadow looks very different on light and dark mode, or mobile and desktop.
• Don’t overuse shadows in styling. Stick to 1 or 2 levels per section.

Browser Support

The box-shadow property is well-supported across all modern browsers. Here is the list of all the browsers that support the box-shadow property:

• 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).

Performance Tips for Shadows

Shadows can improve design aesthetics, but if overused or applied incorrectly, they can slow down rendering, especially on mobile devices. Follow these tips for smoother performance:

1. Avoid large blur values – High blur-radius forces the browser to process more pixels, which can cause lag on low-end devices.
2. Use lighter opacity shadows – Semi-transparent shadows (rgba(0,0,0,0.2)) look cleaner and render faster.
3. Minimize multiple shadows – Combining multiple box-shadow in CSS or drop-shadow() layers increases paint time.
4. Limit animations with shadows – Animated shadows are costly for the GPU; if needed, keep the blur small.
5. Prefer drop-shadow() for irregular shapes – It can be more efficient for images with transparency compared to faking with complex masking.
6. Test on real devices – Shadows may appear fine on desktops, but can stutter on low-performance mobiles.

Conclusion

The box-shadow property in CSS is an important and easy-to-use. Whether you want to highlight an element or add a glowing effect on the HTML element using box-shadow is a great choice. By understanding this, you can make your website look professional with a few lines of code.

More Related Topics:

• Difference Between HTML and CSS
• How to Use Internal CSS in HTML?
• HTML Layout – Elements & Techniques
• CSS Selectors and Specificity (With Examples)
• Types of CSS (Cascading Style Sheet)

CSS Box Shadow – FAQs