Reflection! Cool Effects with -webkit-box-reflect

-webkit-box-reflect is a very interesting property that gives CSS the ability to act like a mirror, reflecting what our elements were originally drawn on.

The last time I wrote it, its compatibility was very, very bleak, but today, although it is still a Non-standard syntax, the compatibility has been greatly improved, and using it, we can achieve a lot of interesting Effect.

As of 2022–08–07, its compatibility has reached 93.48%, take a look at CANIUSE-webkit-box-reflect:

What is -webkit-box-reflect

The syntax of -webkit-box-reflect is very simple, the most basic usage looks like this:

div {
    -webkit-box-reflect: below;
}

Among them, below can be below | above | left | right means bottom, top, left, right, that is, there are 4 directions to choose from.

Suppose we have the following image:

<div></div>

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
}

Add -webkit-box-reflect: right, which is the reflection on the right:

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right;
}

The effect is as follows, generating a mirrored element to the right of an element:

Set the reflection distance

After the direction, you can also follow a specific numerical value to indicate the distance between the reflection and the original element.

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right 10px;
}

After adding 10px, the reflection will be separated from the original element by 10px:

Set the gradient of the reflection

There is also a very important function, that is, behind the azimuth, you can also set a gradient value. Using this gradient value, you can achieve a blurring effect of the reflection, which is very important.

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

Look at the effect, after the virtual and real changes, it is more like a reflection.

In fact, the gradient here is to add a MASK attribute to the reflected image. In the transparent part of the MASK attribute, the image will become transparent, while the solid color part will remain the original image.

CodePen Demo -- -webkit-box-reflect Demo

Use -webkit-box-reflect to achieve some interesting animations

After mastering the basic syntax, we can use it to achieve some interesting dynamic effects, which are briefly listed below.

I've found this property to be especially useful in some dark-style pages. It can make a lot of dynamic effects look much taller. (personal aesthetic)

Using -webkit-box-reflect in buttons

With some buttons with dynamic border animation, it can create a very sci-fi effect:

If you are interested, you can poke the source code to understand:

CodePen demo -webkit-box-reflect Neon Button Hover Effect

Use -webkit-box-reflect in the Text Effects

In a darker setting, the use of -webkit-box-reflect makes the whole effect much more advanced.

CodePen demo - Font & -webkit-box-reflect

Use -webkit-box-reflect in 3D Effects

Next, we can even apply -webkit-box-reflect to the 3D effect to create a completely different viewing experience.

Let's add a reflection effect to a 3D photo wall:

CodePen demo - 3DView & -webkit-box-reflect

Use -webkit-box-reflect to create artistic patterns

Interesting CSS art, here it is again.

In this article by Mr. Yuan Chuan--Chinese Window Lattice And CSS, it introduces the use of -webkit -box-reflect generates such an idea of ​​​​cutting art.

Since -webkit-box-reflect can generate reflections, we can use it to perform continuous nesting of dolls, layer by layer, then we only need to generate a basic element, and we can use reflections to produce various effects.

Suppose, we have the following structure:

<div class="g-wrap1">
    <div class="g-wrap2">
        <div class="g-wrap3">
            <div class="g-wrap4"></div>
        </div>
    </div>
</div>

We just need to implement a graph for .g-wrap4, for example:

.g-wrap4 {
    background:
        radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
        radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);
}

Then there are 4 layers of nesting, first adding a layer of reflection to wrap4, via -webkit-box-reflect.

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}

we can get:

Continue nesting and add a layer of reflection to the .g-wrap3:

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}

Go ahead and add a reflection -webkit-box-reflect to .g-wrap2:

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}

Finally, add a -webkit-box-reflect to .g-wrap1:

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}
.g-wrap1 {
    -webkit-box-reflect: above 0px;
}

We can get a graphic obtained by 4 layers of reflection:

In this way, through different basic graphics, we can use our imagination to generate a variety of paper-cut symmetrical graphics:

The complete code can be found here:

CodePen Demo -- -webkit-box-reflect artist

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.