Reflection! Cool Effects with -webkit-box-reflect
Tags: webdev, css, javascript, html
Published: 2022-08-07 05:17:14

---
title: Reflection! Cool Effects with -webkit-box-reflect
published: true
description: Using box reflect, we can achieve a lot of interesting Effect.
tags: webdev, css, javascript, html
# cover_image: https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0857141e2b05402fba588ba1ad7c52bf~tplv-k3u1fbpfcp-zoom-1.image
# Use a ratio of 100:42 for best results.
---

[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-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](https://caniuse.com/?search=-webkit-box-reflect):

![CANIUSE -webkit-box-reflect](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bf12701081349649fbfb486e821cad3~tplv-k3u1fbpfcp-zoom-1.image)

## What is `-webkit-box-reflect`

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

```CSS
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:

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

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/189cd54e749a4b6a86f59e1551bc884e~tplv-k3u1fbpfcp-zoom-1.image)

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

```CSS
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:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f684b74f2494659b92105ea223e794f~tplv-k3u1fbpfcp-zoom-1.image)

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

```CSS
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`:

![A simple demo of -webkit-box-reflect](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8f7f9bf5bd844f9afc3345c48921103~tplv-k3u1fbpfcp-zoom-1.image)

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

```CSS
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.

![-webkit-box-reflect with gradient](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d6c7ee199e742ddbe128582e8498735~tplv-k3u1fbpfcp-zoom-1.image)

[CodePen Demo -- -webkit-box-reflect Demo](http://codepen.io/Chokcoco/pen/ORbvxJ)


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

![-webkit-box-reflectto achieve some interesting animations](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cb723029d304c9f90029cdde010c18b~tplv-k3u1fbpfcp-zoom-1.image)

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

[CodePen demo -webkit-box-reflect Neon Button Hover Effect](https://codepen.io/Chokcoco/pen/BaQzBEG)

### 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](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0857141e2b05402fba588ba1ad7c52bf~tplv-k3u1fbpfcp-zoom-1.image)

[CodePen demo - Font & -webkit-box-reflect](https://codepen.io/Chokcoco/pen/xxREaLz)

### 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](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd15e7f5ac5d4341b0533b19fa247edd~tplv-k3u1fbpfcp-watermark.image)

[CodePen demo - 3DView & -webkit-box-reflect](https://codepen.io/Chokcoco/pen/ZEBpjVO)

## 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](https://yuanchuan.dev/2019/05/15/window-lattice-and-css.html), 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:

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

```CSS
.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%);
}
```

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4110678b5d4a456785075660644bd0bf~tplv-k3u1fbpfcp-zoom-1.image)

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

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

we can get:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e0d948fc74f4537a215017cd87d6bd6~tplv-k3u1fbpfcp-zoom-1.image)

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

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

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1f348f26ee14c5fac297e03bcb2f74d~tplv-k3u1fbpfcp-zoom-1.image)

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

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

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03c21677186c40179ec6ad837e97f1ee~tplv-k3u1fbpfcp-zoom-1.image)

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

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

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f07287c288e9443893f41cc0d9418124~tplv-k3u1fbpfcp-zoom-1.image)

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](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4db70c8262b47a4bea622067bb7aecb~tplv-k3u1fbpfcp-zoom-1.image)

The complete code can be found here:

[CodePen Demo -- -webkit-box-reflect artist](https://codepen.io/Chokcoco/pen/vYyyYQj)

## Finally

More wonderful CSS technical articles are summarized in my [Github -- iCSS](https://github.com/chokcoco/iCSS).

And maybe you will love my [CodePen](https://codepen.io/Chokcoco/), which has a large number of amazing CSS effects.