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

Let us understand each CSS property with explanations and examples.

1. backdrop-filter (Blurring & Filtering Background 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

.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 (rgba or opacity).
It is not supported in Internet Explorer.

2. box-reflect (Reflection Effect for Elements)

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

Syntax: Image Reflection

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

-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 to an element.

Syntax

box-shadow: offsetX offsetY blurRadius spreadRadius color;

Let's Add a Soft Shadow

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

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 do not include padding/border.

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

.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

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

Example

<!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

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

articles

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

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By