CSS cleverly uses gradients to achieve advanced background light animation

accomplish

This effect is difficult to replicate completely using CSS. The light effects and shadows simulated by CSS are relatively low quality, and we can only say that we try to restore them as much as possible.

In fact, each set of lights is basically the same, so we only need to implement one of them to almost achieve the entire effect.

Observe this effect:

Its core is actually the angular gradient -- conic-gradient(). Using the angular gradient, we can roughly achieve such an effect:

<div></div>

div {

    width: 1000px;

    height: 600px;

    background:

        conic-gradient(

            from -45deg at 400px 300px,

            hsla(170deg, 100%, 70%, .7),

            transparent 50%,

            transparent),

            linear-gradient(-45deg, #060d5e, #002268);

}

See the effect:

It's a bit like that. Of course, if you look closely, you will find that the gradient color does not end from one color to transparent, but color A -- transparent -- color B. In this way, the other half of the light source will not be so abrupt. The modified CSS code is:

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
}

We added an extra color at the end of the angular gradient to get a better look:

Emm, here we will find that only the angular gradient conic-gradient() is not enough, it cannot simulate the effect of light source shadow, so other properties must be used to achieve the effect of light source shadow.

Here, we will naturally think of box-shadow. Here is a trick to use multiple box-shadows to achieve the effect of Neon lights.

Let's add another div to realize the light source shadow:

<div class="shadow"></div>

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: 
        0px 0 .5px hsla(170deg, 95%, 80%, 1),
        0px 0 1px hsla(170deg, 91%, 80%, .95),
        0px 0 2px hsla(171deg, 91%, 80%, .95),
        0px 0 3px hsla(171deg, 91%, 80%, .95),
        0px 0 4px hsla(171deg, 91%, 82%, .9),
        0px 0 5px hsla(172deg, 91%, 82%, .9),
        0px 0 10px hsla(173deg, 91%, 84%, .9),
        0px 0 20px hsla(174deg, 91%, 86%, .85),
        0px 0 40px hsla(175deg, 91%, 86%, .85),
        0px 0 60px hsla(175deg, 91%, 86%, .85);
} 

OK, we have the light, but the problem is that we only need the light from one side, what should we do? There are many ways to crop. Here, I introduce a method to use clip-path to crop any space of an element:

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: .....;
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
}

The principle is this:

In this way, we get the light on one side:

Here, CSS actually has a way to achieve one-sided shadows, but the actual effect is not good, so the above solution was finally adopted.

Next, we can overlap the above-mentioned unilateral light and angular gradient by positioning, rotating, etc., and we can get the following effect:

Now, it looks quite similar. The next thing to do is to make the whole pattern move. There are many techniques here. The core is to use CSS @Property to realize the angular gradient animation and overlap the light animation and angular gradient.

We need to use CSS @Property to transform the code gradient. The core code is as follows:

<div class="wrap">
    <div class="shadow"></div>
</div>

@property --xPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 400px;
}
@property --yPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 300px;
}

.wrap {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at var(--xPoint) var(--yPoint),
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
    animation: pointMove 2.5s infinite alternate linear;
}

.shadow {
    position: absolute;
    top: -300px;
    left: -330px;
    width: 430px;
    height: 300px;
    background: #fff;
    transform-origin: 100% 100%;
    transform: rotate(225deg);
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    box-shadow: ... a lot of shadow code is omitted here;
    animation: scale 2.5s infinite alternate linear;
}
 
@keyframes scale {
    50%,
    100% {
        transform: rotate(225deg) scale(0);
    }
}

@keyframes pointMove {
    100% {
        --xPoint: 100px;
        --yPoint: 0;
    }
}

In this way, we have achieved a complete light animation:

Let's review the steps to achieve such an animation:

1. Use conic-gradient to create the basic framework. Multiple gradients are also used here, with a dark background behind the conic-gradient.
2. Using multiple box-shadows to achieve light and shadow effects (also known as Neon effect)
3. Use clip-path to clip any area of ​​an element
4. Using CSS @Property to achieve gradient animation effect

The remaining work is to repeat the above steps, add other gradients and light sources, and debug the animation. Finally, we can get a simple simulation effect like this:

Since the original effect is .mp4, it is impossible to get the accurate color and shadow parameters. The color is directly taken from the color palette, and the shadow is simulated more casually. If there is a source file and accurate parameters, the simulation can be more realistic.

You can find the full code here: CodePen – iPhone 13 Pro Gradient

at last

This article is more for fun. In practice, there must be more elegant solutions to create the above effects, and there should be better ways to simulate them using CSS. Here I am just throwing out some ideas. Some of the techniques 1, 2, 3, and 4 in the process are worth learning from.

The above is the details of how to use CSS gradient to achieve advanced background light animation. For more information about CSS gradient background animation, please pay attention to other related articles on 123WORDPRESS.COM!