CSS Box Shadow

You may have noticed a soft shadow behind a box, button, or card on a website. That shadow will make the element look three-dimensional, and this is done by using an important property of CSS called box-shadow. In this blog, 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
• 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
• Best Practices
• Browser Support
• Conclusion

What is CSS?

CSS stands for Cascading Style Sheet. 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:

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

What is CSS Box Shadow

The box-shadow property in CSS 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

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 is important in creating visually appealing designs. Here are some of the examples that will help you to understand the box shadow property 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 an inner 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:

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

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.

CSS Box Shadow – FAQs