Design Atlas
한국어
✦ Visual effects

Box reflect

박스 리플렉트

-webkit-box-reflect draws a mirrored copy of an element in one line, but it's WebKit/Blink-only. The standards-safe fallback duplicates the element and fades it with scaleY(-1) plus mask-image.

Also known as: -webkit-box-reflectMirror reflection
···
html
<div class="pair">
  <div class="item"><div class="card reflect">A</div><span class="cap">-webkit-box-reflect</span></div>
  <div class="item"><div class="fallback-wrap"><div class="card">B</div><div class="card fallback-copy" aria-hidden="true">B</div></div><span class="cap">scaleY(-1) + mask-image</span></div>
</div>
css
.pair{display:flex;gap:16%}
.item{display:flex;flex-direction:column;align-items:center;gap:46px}
.card{position:relative;width:20vmin;max-width:88px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#5b5bf7,#18c29c);display:grid;place-items:center;color:#fff;font:800 22px/1 sans-serif}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{to{transform:translateX(120%)}}
.reflect{-webkit-box-reflect:below 6px linear-gradient(transparent 40%,rgba(255,255,255,.35))}
.fallback-wrap{position:relative}
.fallback-copy{position:absolute;left:0;top:calc(100% + 6px);transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 60%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 60%);pointer-events:none}
.cap{font:600 11px/1.3 monospace;color:var(--muted);text-align:center}

-webkit-box-reflect: <direction> <offset> <mask-gradient> draws a flipped copy of the element in the given direction (below/above/left/right) with no extra markup, faded by the mask. As the name says, it's WebKit-family only (Chrome, Edge, Safari) and was never standardized, so Firefox renders nothing at all.

The standards-only equivalent duplicates the element, flips it with transform: scaleY(-1), and fades it out with a mask-image gradient (plus -webkit-mask-image for older Safari). More markup, but it works everywhere.

Because the reflection is a full re-render of the source, any animation the source has — like the sweeping highlight in this demo — plays in the reflection too, doubling the paint cost. Keep that in mind before reflecting something heavy. Like filter and transform, box-reflect also forces its own compositing layer.

When to use

If you only target Chromium/Safari, -webkit-box-reflect alone is enough. If Firefox support matters, ship the duplicate + scaleY(-1) + mask-image fallback.