This article will introduce a drop-shadow() using CSS filter, which can add shadow effect to HTML elements and SVG elements to achieve a cool shadow effect, which can be used in a variety of different scenes. Through this article, you can learn:

  1. How to usefilter: drop-shadow()Add single and multiple shadows to parts of an element, and use multiple shadows for Neon
  2. HTML element matchingfilter: drop-shadow()And SVG elementsfilter: drop-shadow()The resulting light and shadow effect

Line lighting Neon animation using WebGL implementation

One day while walking around CodePen, I found an interesting line light effect using WebGL, NEON LOVE, which was very interesting:

But since the source code is done using WebGL, drawing such a simple effect, through GLSL shaders and other code, is close to 300 lines.

So, can we do this using HTML(SVG)+CSS?

Use drop-shadow to add single and multiple shadows to parts of an element

First, an important step to achieve this effect is to shadow parts of the element.

Suppose we have a graph like this:

<div></div>
Copy the code

We set the div image to border-radius: 50% and add a border-top:

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid # 000;
    border-radius: 50%;
}
Copy the code

The results are as follows:

If I want to just add a shadow to the arc, try using box-shadow:

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid # 000;
    border-radius: 50%;
  + box-shadow: 0 0 5px # 000;
}
Copy the code

Emm: The shadow is applied to the entire div:

To solve this situation, a smart student would immediately think of a filter: The drop-shadow() attribute creates a rectangular shadow behind the entire box of an element, while the drop-shadow() filter creates a shadow that matches the shape of the image itself (the alpha channel).

Ok, we use drop-shadow() instead of box-shadow:

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid # 000;
    border-radius: 50%;
  - box-shadow: 0 0 5px # 000;
  + filter: drop-shadow(0 0 5px # 000);
}
Copy the code

In this way, we get shadows that match the shape of the image itself (alpha channel) :

In addition, drop-shadow() can also be applied to an image multiple times to achieve the effect of multiple shadows:

div{...filter: 
        drop-shadow(0 0 2px # 000)
        drop-shadow(0 0 5px # 000)
        drop-shadow(0 0 10px # 000)
        drop-shadow(0 0 20px # 000);
}
Copy the code

We’ll get a multi-shadow overlay of the visible part of the pattern:

Transpose the black and white colors of the above example, and we get a very artistic pattern, like a luminous planet seen from deep space:

CodePen Demo — multi drop-shadow Neon

Realize heart-shaped line animation

The next step is to animate the heart-shaped line, which is relatively easy to do with SVG. SVG line animation has been mentioned many times before. If you are interested, you can also read these two articles:

  • Introduction to SVG line animation
  • SVG implements complex line animation

We first need to get a heart shape implemented using SVG , either by drawing an SVG Path yourself or with some tools.

Here I used the tool to get a heart-shaped Path Path: SVGPathEditor

Use the tool to quickly draw the desired shape and get the corresponding Path:

The key is to get this SVG Path:

M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160
Copy the code

With it, using SVG’s stroke-dasharray and stroke-offset, we can easily get a heart chase animation:

<div class="container">
    <svg>
        <path class="line" d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
    </svg>
    <svg>
        <path class="line line2" d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
    </svg>
</div>
Copy the code
body {
    background: # 000;
}
svg {
    position: absolute;
}
.container {
    position: relative;
}
.line {
    fill: none;
    stroke-width: 10;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #fff;
    stroke-dasharray: 328 600;
    animation: rotate 2s infinite linear;  
}
.line2 {
    animation: rotate 2s infinite -1s linear;   
}
@keyframes rotate {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 928; }}Copy the code

A brief explanation of the above code:

  1. Two identical SVG graphics, throughstroke-dashoffsetCut the complete line shape into sections
  2. throughstroke-dashoffsetTo achieve a complete line animation loop (928 is the length of the full path, which can be calculated by JavaScript).
  3. The entire animation process 2s, set one of themanimation-delay: -1s“, triggering the animation 1s ahead of time, thus realizing the chase animation of two heart-shaped lines

The effect is as follows:

Add light to the lines

With the previous two steps in mind, this step is fairly straightforward.

Finally, we just need to add multiple shadows of different colors to two SVG lines using drop-shadow() :

.line{... --colorA:#f24983;
    filter:
        drop-shadow(0 0 2px var(--colorA))
        drop-shadow(0 0 5px var(--colorA))
        drop-shadow(0 0 10px var(--colorA))
        drop-shadow(0 0 15px var(--colorA))
        drop-shadow(0 0 25px var(--colorA));
}

.line2 {
    --colorA: #37c1ff;
}
Copy the code

In the end, we used SVG + CSS to almost perfectly replicate what we had done with WebGL at the beginning of this article:

Complete the code you can swipe — CSS-inspired SVG with drop-shadow to achieve line lighting effects

Stretch out in all directions

Of course, after mastering the above techniques, there are a lot of interesting effects that we can explore and implement, so I’m just going to throw out a few Pointers here. List two effects I tried myself.

One category is applied to buttons, which can achieve the effect of buttons with light and shadow. The following is a schematic of one of them, skillfully using stroke-Dashoffset, which can have a lot of deformation:

Full source code can swipe CodePen — Neon Line Button

We don’t have to use SVG, we can use HTML + CSS to achieve a simple Loading effect:

Full source code can hit CodePen — Neon Loading

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More wonderful CSS effects can follow my CSS inspiration

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.