---
title: "CSS Properties Explained: backdrop-filter, box-reflect, box-shadow, box-sizing, and caption-side"  
description: "Let's go through each of these CSS properties backdrop-filter, box-reflect, box-shadow, box-sizing, and caption-side with explanations and examples."  
author: "Ashutosh Patel"  
published: 2025-03-24  
updated: 2025-03-24  
canonical: https://www.mindstick.com/articles/338854/css-properties-explained-backdrop-filter-box-reflect-box-shadow-box-sizing-and-caption-side  
category: "css-css3"  
tags: ["css-css3", "css box shadow", "css styling", "css property"]  
reading_time: 4 minutes  

---

# CSS Properties Explained: backdrop-filter, box-reflect, box-shadow, box-sizing, and caption-side

Let us understand each CSS [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) with explanations and examples.

**1. backdrop-filter (Blurring & [Filtering](https://www.mindstick.com/forum/33958/how-to-filtering-with-the-entity-framework-is-an-asp-dot-net-mvc-application) [Background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) Content)**

The `backdrop-filter` property applies graphical effects (such as **blur**, **brightness**, and **contrast**) to the **area behind an element**.

It is often used to create **glassmorphism** effects.

## Syntax

```css
.blur-box {
   width: 300px;
   height: 200px;
   background: rgba(255, 255, 255, 0.3); /* Transparent white */
   backdrop-filter: blur(10px); /* Blurred background */
   border-radius: 10px;
   padding: 20px;
}
```

## Notes

- It works only if the element has some [transparency](https://www.mindstick.com/articles/336962/how-blockchain-technology-be-applied-to-improve-transparency-in-industries) (**rgba** or **opacity**).
- It is not supported in [Internet](https://yourviews.mindstick.com/view/81617/now-it-is-time-to-say-goodbye-to-internet-explorer) Explorer.

**2.** `box-reflect` **([Reflection](https://www.mindstick.com/interview/1137/what-is-attributes-and-reflection-in-c-sharp) Effect for [Elements](https://yourviews.mindstick.com/story/1372/the-5-elements-of-nature))**

The `box-reflect` property creates a reflection of an element from the bottom, top, left, or right.

## Syntax: Image Reflection

```css
.reflection {
   width: 200px;
   height: auto;
   box-reflect: below 10px linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
}
```

## Notes

- It is not supported in Firefox and IE.
- Requires the `-webkit-` prefix:

```css
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
```

**3.** `box-shadow` **(Adding Shadows to Elements)**

The CSS property `box-shadow` adds a [shadow effect](https://www.mindstick.com/forum/158673/how-can-you-create-a-box-shadow-effect-using-css) to an element.

## Syntax

```css
box-shadow: offsetX offsetY blurRadius spreadRadius color;
```

Let's Add a Soft Shadow

```css
.shadow-box {
   width: 250px;
   height: 150px;
   background: white;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
   padding: 20px;
}
```

## Note

- Multiple shadows can be added using commas.
- Example of multiple shadows:

```css
box-shadow: 2px 2px 10px gray, -3px -3px 8px lightgray;
```

**4.** `box-sizing` **(Controls Element's Sizing)**

The `box-sizing` property determines how **width** and **height** are calculated.

By default, padding and borders **increase** the size of the element.

## Values

`content-box` (default) → [width and height](https://www.mindstick.com/forum/158680/what-css-property-is-used-to-set-the-width-and-height-of-an-element) do not include padding/border.

`border-box` → width and height include padding/border.

```css
.box1, .box2 {
   width: 200px;
   padding: 20px;
   border: 5px solid black;
}
.box1 {
   box-sizing: content-box; /* Default */
}
.box2 {
   box-sizing: border-box; /* Includes padding & border */
}
```

## Compare

- `.box1` → actual size = 200px + padding + border
- `.box2` → remains 200px including padding and border

**5.** `caption-side` **(Table Caption Position)**

The `caption-side` property places the table caption above or below the table.

## Values

- `top` (default) → The caption appears above the table.
- `bottom` → The caption appears below the table.

## Syntax: Table Caption Position

```css
caption {
   caption-side: bottom;
   font-weight: bold;
   color: #007BFF;
}
```

## Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Effects Example</title>
   <style>
       /* Backdrop Filter */
       .blur-box {
           width: 300px;
           height: 200px;
           background: rgba(255, 255, 255, 0.3);
           backdrop-filter: blur(10px);
           border-radius: 10px;
           padding: 20px;
           text-align: center;
           position: relative;
           margin: 20px auto;
       }
       /* Box Reflect */
       .reflection {
           width: 200px;
           display: block;
           margin: 20px auto;
           -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
       }
       /* Box Shadow */
       .shadow-box {
           width: 250px;
           height: 100px;
           background: white;
           box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
           padding: 20px;
           text-align: center;
           margin: 20px auto;
           border-radius: 10px;
       }
       /* Box Sizing */
       .box-sizing-container {
           display: flex;
           justify-content: center;
           gap: 20px;
       }
       .box1, .box2 {
           width: 150px;
           padding: 20px;
           border: 5px solid black;
           text-align: center;
       }
       .box1 {
           box-sizing: content-box;
       }
       .box2 {
           box-sizing: border-box;
       }
       /* Caption Side */
       table {
           width: 50%;
           border-collapse: collapse;
           margin: 20px auto;
       }
       caption {
           caption-side: bottom;
           font-weight: bold;
           color: #007BFF;
       }
       th, td {
           border: 1px solid black;
           padding: 10px;
           text-align: center;
       }
   </style>
</head>
<body>
   <div class="blur-box">Backdrop Filter (Blur Effect)</div>
   <img src="https://www.mindstick.com/Images/home/article.png" class="reflection" alt="Reflection Example">
   <div class="shadow-box">Box Shadow Example</div>
   <div class="box-sizing-container">
       <div class="box1">Content Box</div>
       <div class="box2">Border Box</div>
   </div>
   <table>
       <caption>Table Caption (Bottom)</caption>
       <tr>
           <th>Name</th>
           <th>Age</th>
       </tr>
       <tr>
           <td>Alice</td>
           <td>25</td>
       </tr>
   </table>
</body>
</html>
```

## Output

![CSS Properties Explained: backdrop-filter, box-reflect, box-shadow, box-sizing, and caption-side](https://www.mindstick.com/mindstickarticle/8260fea9-7362-4ead-98d1-7b3ca9842e4b/images/ba08d640-ff69-4db0-9c3a-a25533bef0dd.png)

| **Property** | **Description** |
| --- | --- |
| `backdrop-filter` | Applies effects (blur, brightness, contrast) to the background behind an element. |
| `box-reflect` | Creates a reflection of an element (only in WebKit browsers). |
| `box-shadow` | Adds a shadow effect to an element. |
| `box-sizing` | Defines whether width/height includes padding and border. |
| `caption-side` | Positions the caption of a table at the top or bottom. |

Also, Read: [CSS Fonts and Their Properties Explained with Examples](https://www.mindstick.com/articles/338851/css-fonts-and-their-properties-explained-with-examples)

---

Original Source: https://www.mindstick.com/articles/338854/css-properties-explained-backdrop-filter-box-reflect-box-shadow-box-sizing-and-caption-side

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.