Skip to content
Home » CSS Project – Burning Candle

CSS Project – Burning Candle

    In this project, you will learn to create a burning candle with flame with the help of HTML and CSS.

    HTML Code: burning-candle.html

    <!DOCTYPE html>
<html>
<head>
     <title>CSS Project - Burning Candle</title>
</head>
 <body>
     <div id="flame">
     </div>
     <div id="flamestick"></div>
     <div id="candle">
     </div>
 </body>
 </html>

    CSS Code: burning-candle.html

    Now we will insert the following CSS code in the <head> section of the HTML page – burning-candle.html.

    <style>
body {
     background-color:black;
 }
 #flame{
      background-image:linear-gradient(to top,red,orange,beige);
      width: 80px;
      height: 200px;
      position:absolute;
      top:100px;
      left:500px;
      border-radius:75%;
      box-shadow: 10px 10px 60px 20px #cccc00;
      animation-name: bigflame;
      animation-duration: 4s;
      animation-delay:2s;
      animation-iteration-count:infinite;
      }
 @keyframes bigflame{
  0% {
       height: 200px;
       width: 80px;   
     }
 20% {
       height: 210px;
       width: 90px;   
     }
 30% {
       height: 230px;
       width: 90px;   
     }
 50% {
       height: 250px;
       width: 95px;   
    }
 70% {
       height: 230px;
       width: 90px;   
     }
 100% {
       height: 210px;
       width: 90px;   
     }
  }
 #candle {
         width:150px;
	 height:250px;
	 background-image:linear-gradient(to top,black,gray,lightgray,orange);
	 position:absolute;
	 top:325px;
	 left:470px;
     }
#flamestick{
        width:10px;
	height:40px;
	background:black;
	position:absolute;
	top:290px;
	left:540px;
	opacity:90%;
     }
</style>

    The entire page will look like the following.

    Whole Program Code

    <!DOCTYPE html>
<html>
<head>
     <title>Lamp - Diya</title>
     <style>
     body {
         background-color:black;
     }
     #flame{
 
         background-image:linear-gradient(to top,red,orange,beige);
         width: 80px;
         height: 200px;
         position:absolute;
         top:100px;
         left:500px;
         border-radius:75%;
         box-shadow: 10px 10px 60px 20px #cccc00;
         animation-name: bigflame;
         animation-duration: 4s;
         animation-delay:2s;
         animation-iteration-count:infinite;
       }
 @keyframes bigflame{
  0% {
   height: 200px;
   width: 80px;   
 }
 20% {
   height: 210px;
   width: 90px;   
 }
  30% {
   height: 230px;
   width: 90px;   
 }
 50% {
   height: 250px;
   width: 95px;   
}
 70% {
   height: 230px;
   width: 90px;   
 }
 100% {
   height: 210px;
   width: 90px;   
 }
 
 }
 #candle {
 
     width:150px;
	 height:250px;
	 background-image:linear-gradient(to top,black,gray,lightgray,orange);
	 position:absolute;
	 top:325px;
	 left:470px;
}
#flamestick{
    width:10px;
	height:40px;
	background:black;
	position:absolute;
	top:290px;
	left:540px;
	opacity:90%;
}
</style>
 </head>
 <body>
         <div id="flame">
         </div>
         <div id="flamestick"></div>
         <div id="candle">
         </div>
 </body>
 </html>

    Output : burning-candle.html

    Output-CSS Project Burning-Candle
    Output-CSS Burning-Candle

    Tags: