Frontend Canteen
Published in

Frontend Canteen

Reflection! Cool Effects with -webkit-box-reflect

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

Today, although it is still a Non-standard syntax, the compatibility has been greatly improved, and with it we can achieve very many interesting effects.

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

CANIUSE -webkit-box-reflect

What is -webkit-box-reflect

The syntax of -webkit-box-reflectis 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: rightto achieve just the right side of the reflection:

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:

A simple demo of -webkit-box-reflect

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 spaced 10px apart from the original element:

-webkit-box-reflect with distance

Set the gradient of the reflection

There is also a very important function, that is, behind the orientation, 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. The transparentpart will make the image transparent, while the solid color part will keep the original image.

-webkit-box-reflect with gradient

CodePen Demo — -webkit-box-reflect Demo

Use -webkit-box-reflectto 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)

Use -webkit-box-reflect in the Button Effects

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

-webkit-box-reflectto achieve some interesting animations

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.

-webkit-box-reflect in the Text Effects

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:

-webkit-box-reflect in 3D Effects

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 , he introduced the idea of -webkit-box-reflect​​generating paper-cut art.

Since the reflection can be generated by -webkit-box-reflect, then we use it for constant nesting, one layer nested in another, then only one basic element needs to be generated, and we can use the reflection to produce a variety of different effects.

If we have the following HTML:

<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 wrap3:

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

Let’s go ahead and do some of the same things for wrap2:

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

Finally, add -webkit-box-reflectto grap1.

.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:

Use -webkit-box-reflect to create artistic patterns

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.

Well, that’s all for this article, I hope it helps you. :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store