CSS: flame effect

I created a flame effect totally in CSS. The CSS used is minimal; I didn't want to use neither complicated algorithms, nor Javascript nor WebGL.

Click here to see the flame.

    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Flame</title>
    6         <style>
    7             body {
    8                 background-color: black;
    9             }
   10             .centered {
   11                 display: flex;
   12                 justify-content: center;
   13                 align-items: center;
   14             }
   15             .glow {
   16                 background-color: rgb(220, 93, 20);
   17                 border-radius: 50%;
   18                 filter: blur(20em);
   19                 width: 20em;
   20                 height: 20em;
   21                 opacity: 0.5;
   22             }
   23             @keyframes flame {
   24                 0%, 100% { border-radius: 5% 85% 25% 85%; width: 20em; height: 20em; }
   25                 50% { border-radius: 5% 55% 55% 55%; width: 19em; height: 19em; }
   26             }
   27             .fire {
   28                 width: 20em;
   29                 height: 20em;
   30                 background: linear-gradient(-45deg, #3826fc, #bd6e00, #ffa21f, #ffe44a, #fffcc1);
   31                 rotate: 45deg;
   32                 border-radius: 5% 85% 25% 85%;
   33                 animation: flame 0.2s infinite;
   34                 filter: blur(0.3em);
   35             }
   36             .fire2 {
   37                 width: 20em;
   38                 height: 20em;
   39                 background: linear-gradient(-45deg, #1d1770, #bd0000, #ffff1f, #ffe44a, #fffcc1);
   40                 rotate: 45deg;
   41                 border-radius: 5% 95% 45% 95%;
   42                 filter: blur(0.5em);
   43             }
   44             .glow, .fire, .fire2 {
   45                 position: absolute;
   46                 top: 0%;
   47                 left: 0%;
   48                 right: 0%;
   49                 bottom: 0%;
   50                 margin: auto;
   51             }
   52         </style>
   53     </head>
   54     <body>
   55         <div class="centered">
   56             <div class="glow"></div>
   57             <div class="fire"></div>
   58             <div class="fire2"></div>
   59         </div>
   60     </body>
   61 </html>

The flame is composed of 3 layers: a glow effect, a rear flame and a front flame.
The rear flame changes the shape, while the front one remains unchanged. Thanks to the blur, the two flames merge into one.

To find the right color combination I used my gradient generator.

2024
Feb, 01