CSS box-reflect Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The box-reflect property in CSS is a non-standard property that allows you to create a reflection of an element.

This property is primarily supported in WebKit-based browsers such as Safari and older versions of Chrome. It can be used to create visually appealing effects by reflecting the content of an element, much like a mirror.

💡 Syntax

The syntax for the box-reflect property includes specifying the direction of the reflection and optional parameters for offset and masking.

Syntax

Copied

element {
  -webkit-box-reflect: direction offset mask;
}

🎛️ Default Value

The box-reflect property does not have a default value because it is a non-standard property and must be explicitly set for each element.

🏠 Property Values

Value	Description
direction	above, below, left, right.
offset	Any valid CSS length value (e.g., 0px, 10px, 1em).
mask	Optional. Can be a gradient or any other valid CSS image value used to mask the reflection.

📄 Example

In this example, we'll create a reflection of an image below the element with a 10px offset.

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-reflect Example</title>
  <style>
    .reflect {
      -webkit-box-reflect: below 10px;
    }
  </style>
</head>
<body>
  <h1>Image with Reflection</h1>
  <img src="example.jpg" alt="Example Image" class="reflect">
</body>
</html>

🖥️ Browser Compatibility

The box-reflect property is non-standard and is only supported in WebKit-based browsers such as Safari and older versions of Chrome. It is not supported in other major browsers like Firefox or Edge. Therefore, use this property with caution and always provide fallback styles for broader compatibility.

🎉 Conclusion

The box-reflect property can add a unique visual effect to your web elements by creating reflections. However, due to its limited browser support, it should be used sparingly and with appropriate fallbacks. Experiment with different directions, offsets, and masks to achieve the desired effect and enhance your website's design.