No Login Data Private Local Save

CSS Box Reflect Generator - Online WebKit Mirror Effect

6
0
0
0

CSS Box Reflect Generator

Create stunning WebKit mirror reflection effects with live preview. Customize direction, offset, and gradient fade.

WebKit-based browsers
Reflection
0px60px
0% (sharp)100% (full fade)
0.051.0
0.2x1.0x
-webkit-box-reflect: below 8px linear-gradient(transparent 50%, rgba(255,255,255,0.4));

This is a -webkit- prefix property. Works in Chrome, Safari, Edge, and Opera.

Frequently Asked Questions

-webkit-box-reflect is a non-standard CSS property that creates a mirror-like reflection of an element. It works by rendering a reflected copy of the element in a specified direction (above, below, left, or right). You can control the offset (distance between the element and its reflection) and apply a mask gradient to fade the reflection out smoothly. While it's a WebKit-only property, it's supported by all major browsers except Firefox.

-webkit-box-reflect is supported in Google Chrome (all versions), Safari (all versions on both macOS and iOS), Microsoft Edge (Chromium-based), and Opera. It is not supported in Mozilla Firefox or Internet Explorer. For cross-browser compatibility, consider using element() with transform: scaleY(-1) and a gradient overlay as a fallback approach for Firefox.

The gradient parameter acts as a mask over the reflection. It controls the visibility of the reflected image across its length. A typical usage is linear-gradient(transparent 50%, rgba(255,255,255,0.4)), where the reflection starts fully visible and gradually fades out. The transparent part of the gradient keeps the reflection visible, while the semi-transparent or opaque white part masks it out, creating a smooth fade effect. You can also adjust the transparency of the mask to control the overall visibility of the reflection.

Since Firefox doesn't support -webkit-box-reflect, you can create a similar effect using pseudo-elements or a duplicate element with transform: scaleY(-1) and a gradient overlay. Here's a basic approach: create an ::after pseudo-element, mirror it vertically using transform: scaleY(-1), position it below the original, and apply a mask-image with a linear gradient to create the fade. Alternatively, use JavaScript to clone the element and apply the mirror transform for more complex scenarios.

Yes, but with limitations. The -webkit-box-reflect property itself is not directly animatable via CSS transitions or keyframe animations. However, you can animate the element being reflected — such as its opacity, transform, or position — and the reflection will follow in real-time because the browser re-renders the reflection on each frame. This is particularly effective for creating dynamic reflection effects on moving or transforming elements. For the gradient mask, gradual changes require JavaScript to update the property value in small increments.

Yes, -webkit-box-reflect is GPU-accelerated in WebKit browsers and generally performs well. The reflection is rendered as part of the compositing process, which means it doesn't trigger layout recalculations. However, applying it to very large elements or animating reflected content continuously may impact performance on lower-end devices. For best results, use it on static or subtly animated elements and avoid excessive use on elements with complex children or frequent repaints.
Pro Tips
  • Use gradient fade for a polished, professional look — a 40-60% fade works best for most designs.
  • Combine with text-shadow on the original element for enhanced depth.
  • For image reflections, ensure the reflected image has a solid background or the reflection may look odd.
  • Keep offset small (4-12px) for realistic mirror effects; larger offsets create a "floating" look.
  • Pair with perspective and slight transform on the parent for a 3D tilt effect.
🔧 Related Tools