box-reflect is the usual name for the real property -webkit-box-reflect. It draws a mirrored copy of an element in one direction: above, below, left, or right.
The initial value is none. You can add an offset length and an optional mask (often a linear-gradient()) so the reflection fades out. For standard effects that work more widely, see box-shadow, filter, or transform.
There is no unprefixed box-reflect. Use -webkit-box-reflect as progressive enhancement. Firefox does not support it.
-webkit-box-reflect: none | above | below | left | right || <length> || <image> | initial | inherit;Direction first, then optional gap, then optional mask. Example: below 10px linear-gradient(transparent, white).
| Value | Description | Try it |
|---|---|---|
none | Default. No reflection | Try it |
below | Mirror under the element | Try it |
above | Mirror above the element | Try it |
left | Mirror to the left | Try it |
right | Mirror to the right | Try it |
<length> | Gap between the element and its reflection (e.g. 10px) | Try it |
<image> | Mask for the reflection, often a gradient fade | Try it |
initial | Resets to none | Try it |
inherit | Takes the parent value | Try it |
-webkit-box-reflectPick a direction, then optionally add space and a fade mask.
-webkit-box-reflect to a direction such as below.below 12px).linear-gradient()).| Piece | Required? | Role |
|---|---|---|
| Direction | Yes | above, below, left, or right |
| Offset | Optional | Space between the original and the mirror |
| Mask | Optional | Fades or shapes the reflection (see also mask-image ideas) |
Change only -webkit-box-reflect. Supporting browsers show a mirror; Firefox shows the card alone.
Each snippet focuses on -webkit-box-reflect. Use Try It Yourself for a live editor.
A simple mirror under the box.
<style>
.box {
-webkit-box-reflect: below;
}
</style>
<div class="box">Reflect</div>-webkit-box-reflect, not an unprefixed box-reflect.below places the mirror under the element.A length adds space between the element and its mirror.
<style>
.box {
-webkit-box-reflect: below 12px;
}
</style>
<div class="box">Reflect</div>below.12px is the gap between the card and the mirror.A gradient mask makes the mirror look like a soft reflection.
<style>
.box {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
</style>
<div class="box">Reflect</div>below 0 keeps the gap at zero.linear-gradient(transparent, white) fades the reflection.Treat reflections as optional paint. Layout and meaning must work without them.
box-reflect alone does nothing. Always write -webkit-box-reflect.
Firefox ignores the declaration. Check that the design still looks complete without a mirror.
Parents with overflow: hidden or tight height often clip below / above reflections.
Do not put required text only in a reflection. Prefer reduced-motion friendly designs for busy effects.
MDN lists it as non-standard. Prefer widely supported tools like box-shadow or opacity when you need a safe fallback look.
-webkit-box-reflect is a browser style property. Node.js, Deno, and Bun do not apply it. It is non-standard and missing in Firefox.
Chrome 4+, Safari 4+, Chromium Edge, Opera, and Samsung Internet. Firefox: no support. Use only as progressive enhancement.
Bottom line: Ship reflections as optional decoration. Always verify the page without -webkit-box-reflect.
-webkit-box-reflect (there is no standard box-reflect).One line: -webkit-box-reflect mirrors a box for decoration in WebKit and Chromium browsers.
Add depth with a fully standard shadow property.
8 people found this page helpful