Table of contents
1.
Introduction
2.
What is box shadow property in CSS?
2.1.
Syntax
3.
Properties of CSS Box-Shadow
3.1.
Horizontal Offset (h-offset)
3.2.
Vertical Offset (v-offset)
3.3.
Blur Radius (blur)
3.4.
Spread Radius (spread)
3.5.
Color (color)
4.
Browser Support
5.
Frequently Asked Questions:
5.1.
What is box shadow property in CSS?
5.2.
How do you write shadow property in box?
5.3.
What is the CSS property for shadow text?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Box Shadow CSS

Author Nikunj Goel
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Box Shadow, a popular feature in CSS (Cascading Style Sheets), is a crucial tool for web developers aiming to enhance the aesthetic appeal and user experience of web pages. It allows the creation of drop shadows from the frame of HTML elements, adding depth and a three-dimensional look to otherwise flat layouts.

Box Shadow CSS

In this article, we will discuss about box shadow property of CSS. 

What is box shadow property in CSS?

The box-shadow property in CSS is used to create shadows around elements. It provides a way to add depth and dimension to elements on a webpage. The shadow can be customized with various parameters, allowing control over its appearance.

Syntax

box-shadow: h-offset v-offset blur spread color;

 

  • h-offset: Horizontal offset of the shadow.
  • v-offset: Vertical offset of the shadow.
  • blur: The blur radius, creating a blurred shadow.
  • spread: The spread radius, expanding or contracting the shadow.
  • color: The color of the shadow.

For example

.box {
 box-shadow: 5px 5px 10px #888888;
}

 

This example creates a box with a shadow having a horizontal offset of 5 pixels, vertical offset of 5 pixels, blur radius of 10 pixels, and a color of #888888. Adjust these values to achieve the desired shadow effect.

Properties of CSS Box-Shadow

The box-shadow property in CSS has several properties that control the appearance of the shadow.

Horizontal Offset (h-offset)

.box {
 box-shadow: 10px 0 5px #888888;
}

 

This creates a shadow with a horizontal offset of 10 pixels.

Vertical Offset (v-offset)

.box {
 box-shadow: 0 10px 5px #888888;
}

 

This creates a shadow with a vertical offset of 10 pixels.

Blur Radius (blur)

.box {
 box-shadow: 0 0 10px #888888;
}

 

This creates a shadow with a blur radius of 10 pixels.

Spread Radius (spread)

.box {
 box-shadow: 0 0 10px 5px #888888;
}

 

This creates a shadow with a spread radius of 5 pixels.

Color (color)

.box {
 box-shadow: 0 0 10px #ff0000;
}

 

This creates a red-colored shadow with a blur radius of 10 pixels.

Browser Support

The box-shadow CSS property is widely supported across modern web browsers. This property is supported in the following major browsers:

  1. Google Chrome
  2. Mozilla Firefox
  3. Safari
  4. Microsoft Edge
  5. Opera
     

These browsers have been consistent in supporting CSS properties, including box-shadow, to provide a standardized and consistent user experience across different platforms. 

Frequently Asked Questions:

What is box shadow property in CSS?

The box-shadow property in CSS is used to add shadows to elements, creating a sense of depth and dimension. It takes values for horizontal and vertical offsets, blur radius, spread radius, and color.

How do you write shadow property in box?

To apply box shadow in CSS, use the box-shadow property in a selector. Example: box-shadow: 5px 5px 10px #888888; (horizontal offset, vertical offset, blur radius, and color).

What is the CSS property for shadow text?

The CSS property for text shadow is text-shadow. It adds a shadow effect to text, taking values for horizontal and vertical offsets, blur radius, and color.

Conclusion

The box-shadow property in CSS is a powerful tool for enhancing web interfaces, making them more user-friendly and visually appealing. As web technologies continue to evolve, the capabilities and applications of box-shadow are set to expand, further cementing its place in modern web design. Developers can significantly enhance the user experience across the digital landscape by understanding and creatively utilizing box-shadow.

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Live masterclass