CSS Tricks
CSS Trick

Mirror Reflection Effect

Create glass-surface reflections using -webkit-box-reflect.

#css #effects #reflection #webkit

Browser Support

✓ Chrome 4+ ✗ Firefox ✓ Safari 4+ ✓ Edge 79+

Mirror Reflection

Create reflections with a single CSS property (WebKit only).

img {
  -webkit-box-reflect: below 0px linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.5)
  );
}
PartPurpose
below/above/left/rightDirection
0pxGap from original
linear-gradientFade mask

Live Demo

Reflections
WEBKIT
6px
0%
CSS Code
.reflect-demo {
display: flex;
gap: 2.5rem;
justify-content: center;
padding-bottom: 80px;
}
.reflect-item {
text-align: center;
}
.reflect-box {
width: 70px;
height: 70px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
-webkit-box-reflect: below 6px linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4));
}
.reflect-purple {
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}
.reflect-orange {
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.reflect-label {
font-size: 0.7rem;
opacity: 0.6;
margin-top: 2.5rem;
}

WebKit-only. Firefox doesn’t support this property.

Share this CSS trick

Comments