CSS Box Reflect Generator

Build production-ready -webkit-box-reflect CSS with a live preview: pick the reflection direction, tune the offset, and shape the fade with a gradient mask. Copy the code and ship it.

Whether you need a css reflection generator for product images, a css text reflection effect for hero headlines, or a -webkit-box-reflect generator with a fade mask and a Firefox fallback — this tool generates all of it, 100% in your browser.

Honest browser note. -webkit-box-reflect is WebKit/Blink-only (Chrome, Edge, Safari, Opera). Firefox does not support it and it is not a web standard. This generator also outputs a transform-based fallback snippet for Firefox automatically.

Reflection generator

Choose a preview target, tune the reflection, copy the code. Everything runs locally in your browser — nothing is uploaded.

Reflection direction

Below Above Left Right

CSS class name Used as the selector in the generated code.

Offset: 8px Gap between the element and its reflection. Negative values overlap.

Reflection opacity: 50% Strength of the reflection at its brightest point.

Fade starts at: 0% Reflection length kept at full opacity before fading.

Fully faded at: 60% Reflection length where the reflection disappears.

Apply fade mask (linear-gradient)

Uncheck for a crisp full-strength mirror with no fade.

Preview text

Live preview

Reflected

The preview renders in Chrome, Edge, Safari, and Opera. Firefox ignores -webkit-box-reflect — grab the fallback code below for Firefox support.

Generated CSS

Copied!

Firefox fallback — HTML

Firefox fallback — CSS

Copied!

The fallback duplicates your content, flips the copy with transform: scaleY(-1) (or scaleX(-1) for left/right), and fades it with mask-image. Duplicate the markup for every reflected element.

Worked examples

Six ready-to-paste recipes, generated by the same engine as the tool above.

Glass floor

The classic product-shot reflection: tight offset, strong fade-out.

.css-reflect {
  -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
}

Strong mirror

No fade mask at all: a crisp full-strength mirror copy.

.css-reflect {
  -webkit-box-reflect: below 0px;
}

Text shine

Headline shine: the reflection holds briefly, then fades long.

.css-reflect {
  -webkit-box-reflect: below 6px linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 10%, rgba(255,255,255,0) 80%);
}

Above card

Reflection on top of the element, e.g. under a header bar.

.css-reflect {
  -webkit-box-reflect: above 10px linear-gradient(to top, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 50%);
}

Left panel

Horizontal reflection for sidebars and vertical cards.

.css-reflect {
  -webkit-box-reflect: left 12px linear-gradient(to left, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
}

Overlap mirror

Negative offset pulls the reflection over the element for a dense mirror look.

.css-reflect {
  -webkit-box-reflect: below -8px linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 45%);
}

How the syntax works

-webkit-box-reflect: <direction> <offset> <mask-image>;

direction — below, above, left, or right. Default is below.
offset — a length like 8px: the gap between the element and its reflection. May be negative to overlap.
mask-image — usually a linear-gradient applied to the reflection itself. Opaque stops keep the reflection visible; transparent stops hide it. The gradient runs away from the element: to bottom for below, to top for above, to left for left, to right for right.

There is no separate opacity control for the reflection — opacity is faked through the mask: start the gradient with a semi-transparent white such as rgba(255,255,255,0.5) to dim the whole reflection.

Browser support

-webkit-box-reflect is a vendor extension, not a W3C standard. Support as of 2026:

Browser	Support	Notes
Chrome / Edge / Opera	Yes	Blink engine; full support including gradient masks.
Safari	Yes	WebKit origin of the property.
Firefox	No	Never implemented — use the transform fallback above.
Standards track	No	Not in any CSS spec; no unprefixed version exists.

Frequently asked questions

What is -webkit-box-reflect?

-webkit-box-reflect is a CSS property that renders a live, mirrored copy of an element on one of its four sides: below, above, left, or right. Its syntax is -webkit-box-reflect: <direction> <offset> <mask>. The reflection updates automatically if the element changes, so it works on text, images, and whole components without any image editing.

Which browsers support -webkit-box-reflect?

Only WebKit and Blink browsers: Chrome, Edge, Safari, and Opera. Firefox does not support -webkit-box-reflect and never has, and the property is not part of any W3C CSS standard — it is a vendor extension. Always test your reflection in a Chromium-based browser and ship the Firefox fallback this generator provides.

How do I make a -webkit-box-reflect fallback for Firefox?

Duplicate the content in a second element, flip it with transform: scaleY(-1) (or scaleX(-1) for left/right reflections), and fade it with mask-image: linear-gradient(...). Position the copy on the reflected side with absolute positioning. This generator outputs that complete fallback HTML and CSS automatically — copy both blocks and layer them under an @supports check or a feature-detect class.

What does the mask in -webkit-box-reflect do?

The mask controls how the reflection fades out. It is an image (usually a linear-gradient) applied to the reflection itself: opaque areas keep the reflection visible, transparent areas hide it. For example, linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%) starts the reflection at 50% opacity and fades it to nothing by 60% of its height — the classic glass-floor look.

Can the -webkit-box-reflect offset be negative?

Yes. A positive offset pushes the reflection away from the element; a negative offset pulls it inward so the reflection overlaps the element. Negative offsets are useful for tight mirror effects on text, but keep the fade mask strong or the overlap can look muddy.

Why is my -webkit-box-reflect not showing?

The usual causes: (1) you are testing in Firefox, which does not support it — use the fallback snippet instead; (2) the fade mask gradient runs the wrong way, e.g. to top on a below reflection, which hides the whole reflection; (3) the offset is very large and the reflection is clipped by an overflow: hidden ancestor. Check the browser, the gradient direction, and ancestor overflow.

Does -webkit-box-reflect work on text?

Yes — it works on any rendered element, including text, headings, buttons, images, video, and whole cards. Text reflections are a popular use case for hero headlines. Just apply -webkit-box-reflect to the text element itself; no extra markup is needed, and the reflection re-renders if the text changes.

Related CSS tools

Educational tool. -webkit-box-reflect is a non-standard vendor extension — always verify the effect in your target browsers and ship the Firefox fallback where the reflection matters.

Free tool by NRTechStudio