Easy Realistic CSS Fire Effect


hello and welcome to red stapler channel
in this tutorial I’m going to show you how to create an easy pure CSS flame
effect with flickering animation in just a few minutes ready let’s check it out the key concept of this tutorial is to
create multiple color div layers from red to blue and use border-radius and
transform rotation to create a flame shape and finally add an animation loop
to create a flickering effect so let’s start with HTML structure first create a
wrapper div and add several div layers inside I’m going to use four divs for
this flame using red orange code and white color respectively next let’s work on the CSS for each div layer I’m going to set width height and background color red will be the biggest
and white will be the smallest also add position relative to the wrapper and set position to absolute and
set bottom to zero for all flame divs I’m going to add 50% border-radius to
all divs except the top right corner then rotate dips by -45 degrees and set the left position to center all
the divs a next add box-shadow to all divs to create the light effect now let’s work on the base out of the flame. I’m going to create two circle divs with blue and black color using the similar
CSS pattern except this time we will use 50% border-radius on all corners almost done now we just have to add
animation I’m going to create an animation loop that rotate the entire
flame shape back and forth I’m going to randomly add a scaleY to simulate the flickering effect and make it looks more realistic and that’s it let’s see the result so that’s all for this tutorial hope you
guys enjoy if you loved this video please feel free to like or subscribe to
support our channel and stay tuned for the next tutorial thanks for watching
and see you next upload bye

15 Comments

Add a Comment

Your email address will not be published. Required fields are marked *