Create Image Reflections Easily with CSS3’s box‑reflect Property

Before CSS3, creating a reflection effect required editing the image itself; with CSS3 the box‑reflect property makes it trivial.

Syntax

box‑reflect : none | <direction> <offset>? <mask‑box‑image>? (the last two values are optional) <direction> = above | below | left | right <offset> = <length> | <percentage> <mask‑box‑image> = none | <url> | <linear‑gradient> | <radial‑gradient> | <repeating‑linear‑gradient> | <repeating‑radial‑gradient> Default : none

The property can be set to none (no reflection) or a combination of direction, offset, and an optional mask image. If a mask is provided, the offset becomes mandatory.

Step‑by‑step examples

1. Simple reflection below the element

Result:

2. Add a 5px offset

Result:

3. Apply a gradient mask

Result:

These effects work not only on images but also on other elements such as text.

Radial gradient mask and image mask

Radial gradients are used similarly to linear gradients. Example:

Result:

Using an image as a mask:

Result:

Compatibility : The box‑reflect property is currently supported only by WebKit‑based browsers, but mobile browsers generally have no issues.