How to create a flame effect using CSS

The main text starts below.

123WORDPRESS.COM Download:

Pure CSS3 to achieve ultra-realistic candle flame burning animation effect source code

Today's tip is to use pure CSS to generate flames, more realistic flames.

Well, what does it look like? Enter the keyword CSS Fire on CodePen and you’ll find this:

Or something like this:

Could we go a step further, hopefully, using only CSS? Could it be like this:

How to achieve it

Well, we need to use filter + mix-blend-mode combination to do it.

Many flashy CSS effects are filter + mix-blend-mode , which are very interesting, but are not used in business at all. Of course, it never hurts to learn more about them.

As shown in the picture above, the skeleton of the entire candle is very simple except for the flame part, so we will not talk about it in detail. Mainly let's take a look at how to generate the flame and how to give it animation effects.

Step 1: filter blur && filter contrast

The blur filter is superimposed on the contrast filter to create a blended effect.

Take out the two filters separately, their functions are:

1. filter: blur() : Sets Gaussian blur effect to the image.
2. filter: contrast() : Adjusts the contrast of the image.

However, when they "merged", a wonderful fusion phenomenon occurred.

Let's look at a simple example:

Look carefully at the process of the two circles intersecting. When the edges touch each other, a boundary fusion effect will be produced. The blurred edges of Gaussian blur are eliminated through the contrast filter, and the fusion effect is achieved using Gaussian blur.

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

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

Adding filter: blur(5px) contrast(20) to the parent element will look like this:

Step 2: Flame Particle Animation

It looks like it’s working, so let’s move on to the flame animation. Let’s remove filter: blur(5px) contrast(20) of the parent element and then move on.

Here we also use filter fusion effect. In the above flame, we use SASS to randomly and evenly distribute a large number of circular brown divs of different sizes, hiding them inside the flame triangle, which looks 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 animation-delay . It will look like this:

OK, the most important step is to turn on filter: blur(5px) contrast(20) of the parent element, and the magical flame effect will appear:

Step 3: Mix-blend-mode polish

Of course, the above effects are already very good. After various attempts and adjusting parameters, I finally found that adding mix-blend-mode: screen blending mode has a better effect. The final effect of the header image is as follows:

The full source code is on my CodePen: https://codepen.io/Chokcoco/pen/jJJbmz

Some other effects

Of course, once you've mastered this method, this technique for generating flames can be transferred to other effects as well. The picture below is another small demo I made. When hovering over an element, a flame effect is produced:

CodePen Demo -- Hover Fire

Well, these are actually some combinations of filters and blending modes. As usual, someone will definitely leave a message to criticize, saying what's the point of all these fancy things, the performance is not good, and if you dare to use them in business, I'll break your legs.

For me, I humbly accept all kinds of criticisms, doubts and different opinions. Of course, I think that technology is practical on the one hand, and it is also a matter of interest and self-entertainment on the other. I hope the trolls will take a detour~

Back to the topic, after understanding this sticky and wet technique, you can also create many other interesting effects. Of course, you may need more attempts, such as the dripping effect achieved by using a label below:

CodePen Demo -- Single label to achieve drip effect

Details worth noting

Although animation is beautiful, there are still some things to pay attention to during its specific use:

CSS filters can define multiple filters for the same element at the same time, for example, filter: blur(5px) contrast(150%) brightness(1.5) , but the effects produced by applying the filters in different orders are also different;

In other words, using filter: blur(5px) contrast(150%) brightness(1.5) and filter: brightness(1.5) contrast(150%) blur(5px) to process the same image will produce different results. This is because of the order in which the filter's color value processing algorithm processes the image.

Filter animation requires a lot of calculations and constantly redraws the page. It is a very performance-intensive animation. Please pay attention to the usage scenario when using it. Remember to turn on hardware acceleration and use layering technology properly; blur() mixed with contrast() filter effects, setting different colors will produce different effects. The specific algorithm of this color overlay has not yet found very specific rules and regulations. The better way to use it is to try different colors and observe the best effect. Careful readers will find that the above effects are all based on a black background. If you try to change the background color to white, the effect will be greatly reduced. at last

This article only briefly introduces the whole thought process, and many CSS code details and debugging process are not shown. The main CSS properties are already known by default. You can learn more details after reading:

• filter
• mix-blend-mode

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click on the star to subscribe and collect.

This is the end of this article on how to create a flame effect using CSS. For more information about CSS flame effects, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!