CSS box-shadow Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 33 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The box-shadow property in CSS allows you to add shadow effects to elements. You can create multiple shadows separated by commas, and it supports options for color, blur radius, spread radius, and horizontal and vertical offsets.

This property is versatile and can be used to enhance the visual appeal of your website by adding depth and dimension to elements.

💡 Syntax

The syntax for the box-shadow property includes several parameters, but not all are required. The most basic usage only requires the horizontal and vertical offsets.

Syntax

Copied

element {
  box-shadow: h-offset v-offset blur-radius spread-radius color;
}

🎛️ Default Value

The default value for the box-shadow property is none, meaning no shadow will be applied.

🏠 Property Values

Value	Description
h-offset	A length value specifying the horizontal shadow offset.
v-offset	A length value specifying the vertical shadow offset.
blur-radius	A length value specifying the blur radius. (Optional)
spread-radius	A length value specifying the spread radius. (Optional)
color	A color value specifying the color of the shadow. (Optional)
inset	If specified, the shadow is drawn inside the element, making it appear as an inner shadow.

📄 Example

In this example, we'll add a simple shadow to a box.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS box-shadow Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      box-shadow: 10px 10px 5px gray;
    }
  </style>
</head>
<body>
  <h1>Box with Shadow</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The box-shadow property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The box-shadow property is a powerful tool for web developers looking to add depth and dimension to web elements. By experimenting with different values for offsets, blur, spread, and color, you can create a variety of shadow effects to enhance the visual appeal of your web projects. Use this property to highlight important sections, create a sense of layering, or simply add a touch of elegance to your design.