CSS box-reflect

box-reflect is not a standard CSS property. Some WebKit-based browsers support the prefixed property -webkit-box-reflect, which can draw a reflection of an element.

Syntax

-webkit-box-reflect: below 0.5rem;
-webkit-box-reflect: below 0.5rem linear-gradient(transparent, rgba(0, 0, 0, 0.35));

Example

.logo {
  -webkit-box-reflect: below 0.5rem linear-gradient(transparent, rgba(0, 0, 0, 0.25));
}

Result:

Reflect

Support note

Because this is non-standard, do not rely on it for important UI. Treat it as a decorative enhancement.

Alternative

For predictable effects, duplicate decorative content with CSS or SVG, or use a pseudo-element with a transform and gradient mask.