CSS box-reflect Property

What You’ll Learn

The box-reflect property creates a mirror-like reflection of an element. It is a WebKit-only visual effect — useful for decorative layouts, but not a standard CSS feature you should depend on everywhere.

Definition and Usage

The box-reflect CSS property lets you create a reflection of an element, similar to a mirror image. In practice, you write it as the vendor-prefixed property -webkit-box-reflect because there is no widely supported standard version.

This property is primarily supported in WebKit-based browsers such as Safari and some Chromium builds. It can create visually appealing effects by reflecting the content of an element — images, cards, logos, and headings are common targets.

📝 Syntax

The syntax for box-reflect includes a direction, an optional offset, and an optional mask:

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

Basic Example

.reflect {
  -webkit-box-reflect: below 10px;
}

Syntax Rules

• Always use the -webkit- prefix — there is no reliable unprefixed version.
• Direction is required: above, below, left, or right.
• Offset is optional spacing between the element and its reflection (e.g. 10px).
• Mask is optional — usually a gradient that fades the reflection out.
• There is no default reflection; you must set the property explicitly on each element.

💎 Property Values

The -webkit-box-reflect value is made up of three parts: direction, offset, and an optional mask.

Reflection Directions

The direction keyword controls where the mirrored copy appears relative to the original element:

• below — Most common. The reflection appears under the element, like a floor mirror.
• above — The reflection appears above the element.
• left — The reflection appears to the left side.
• right — The reflection appears to the right side.

Combine a direction with an offset to add breathing room between the element and its reflection. Add a gradient mask to fade the reflection smoothly instead of showing a hard mirrored edge.

Examples Gallery

Try basic reflections, gradient masks, different directions, and card-style effects.

<style>
  .reflect {
    -webkit-box-reflect: below 10px;
  }
</style>

<img src="photo.jpg" alt="Example" class="reflect">

<style>
  .fade-reflect {
    -webkit-box-reflect: below 4px linear-gradient(transparent 30%, rgba(255,255,255,0.4));
  }
</style>

<div class="fade-reflect logo">Logo</div>

<style>
  .reflect-above {
    -webkit-box-reflect: above 6px linear-gradient(transparent, rgba(0,0,0,0.25));
  }
</style>

<h2 class="reflect-above">Featured Title</h2>

<style>
  .product-card {
    width: 10rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    -webkit-box-reflect: below 12px linear-gradient(transparent 50%, rgba(255,255,255,0.2));
  }
</style>

<article class="product-card">
  <h3>Headphones</h3>
  <p>$99</p>
</article>

Fallback Strategy

Because -webkit-box-reflect is not widely supported, plan your design so it works without reflections:

• Keep content readable — Do not place important text only in the reflection area.
• Add bottom spacing carefully — Reflections extend the visual footprint; unsupported browsers will not need that extra space.
• Use as enhancement — The element should look complete with or without the mirror effect.
• Consider alternatives — For broader support, duplicate content with transform: scaleY(-1) and opacity in supporting layouts, or use SVG filters.

💡 Best Practices