Amazing CSS flames

Today’s little trick is to use pure CSS to generate flames, realistic flames!

Hmm, what does it look like? If we search on CodePen with CSS flame as a keyword, we can see the following effect:

or this:

We hope, just using CSS, the effect can be more realistic? Could it be like this:

How to achieve it

Well, we need to use a combination of filter+ mix-blend-modeto do it.

Many CSS flashy effects are using by filter+ mix-blend-mode, which is very interesting, but it is not used in our daily business at all. Of course, it is good to know more about it.

As shown in the picture above, the skeleton of the entire candle, except for the part of the flame, is very simple, so we won’t talk about it. Let’s mainly look at how the flame is generated and how to animate it.

Step 1: filter blur && filter contrast

The Blur filter overlays the Contrast filter for the fusion effect.

Take out the two filters separately, and their functions are:

1. filter: blur(): Sets a Gaussian blur effect on the image.
2. filter: contrast(): Adjust the contrast of the image.

However, when they “fit”, a wonderful fusion phenomenon occurs.

Let’s start with a simple example:

Look carefully at the process of the intersection of the two circles. When the edge is in contact with the edge, a boundary fusion effect will be produced. The blurred edge of the Gaussian blur is eliminated through the contrast filter, and the Gaussian blur is used to achieve the fusion effect.

Using the above filter blur & filter contrast, we need to first generate a flame-like triangle. (Omit the process)

The specific implementation process of the flame-shaped triangle here is explained in detail in this article: CSS filter skills and details you don’t know

When the parent element is added filter: blur(5px) contrast(20), it will become like this:

Step 2: Fire particle animation

It looks a bit like it, the next is the flame animation, we first remove the parent element filter: blur(5px) contrast(20), and then continue.

Here is also the use of filterthe fusion effect. In the above flame, we use SASS to randomly and evenly distribute a large number of circular brown divs of different sizes, hidden inside the flame triangle, which is probably like this:

Next, we use SASS to give each small circle in the middle an animation that gradually disappears from bottom to top, and evenly assign different ones animation-delay, it will look like this:

OK, the most important step is to filter: blur(5px) contrast(20) open , and the magical flame effect will come out:

Step 3: mix-blend-mode polish

Of course, the above effect is already very good. After various attempts and adjusting the parameters, I finally found that adding the mix-blend-mode: screenblending mode, the effect is better, and the final effect on the header image is as follows:

The whole source code is on my CodePen: CodePen Demo — CSS Fire

some other effects

Of course, after mastering this method, this technique of generating flames can also be transferred to other effects. The picture below is another small Demo that I tinkered with. When hovering over an element, it produces a flame effect:

CodePen Demo — Hover Fire

Well, these are actually some combination of filters and blending modes. Of course, Of course, that’s what makes CSS so fascinating.

Back to the topic, after understanding this sticky and wet technique, you can also toss out many other interesting effects. Of course, you may need to try more, such as the dripping effect achieved by using a single DIV tag below:

CodePen Demo — a single label to achieve the dripping effect

Notable details

Although the animation is beautiful, there are still some points to pay attention to in the specific use process:

1. Multiple CSS filters can be defined for the same element at the same time, for example filter: blur(5px) contrast(150%) brightness(1.5), but the effect of different filters is different;

That is to say, using filter: blur(5px) contrast(150%) brightness(1.5)and filter: brightness(1.5) contrast(150%) blur(5px) to process the same image, the effect obtained is different, because the color value processing algorithm of the filter processes the image in sequence.

1. Filter animation requires a lot of calculations and constantly redraws the page. It is a very performance-intensive animation. Pay attention to the usage scene when using it. Remember to turn on hardware acceleration and use layering technology reasonably;
2. blur()Mixing contrast()filter effects, setting different colors will produce different effects, the specific algorithm of this color superposition has not found very specific rules and regulations, the better way to use it is to try different colors and observe to get the best effect;
3. Careful readers will find that the above effects are all based on a black background. If you try to change the background to white, the effect will be greatly reduced.

Finally

This article only briefly introduces the whole process of thinking, and many CSS code details and debugging process are not shown. The main CSS properties are basically mastered by default. After reading, you can learn more and add more details:

• filter
• mix-blend-mode

More wonderful CSS technical articles are collected in my Github — iCSS.