Realistic Candle Animation using HTML and CSS

In this post, we'll embark on a creative journey to construct a realistic candle illustration using HTML and CSS. This detailed representation of a candle features various components, including the flame, wax, and even a subtle glowing effect. Join us as we unravel the art of crafting this visually captivating candle with code.

Must Read: Professional Loading animation using HTML, CSS and JavaScript

The provided HTML code structures our candle illustration, breaking it down into various components:

<div class="main-container">
    <div class="candle">
        <div class="top">
            <div class="glow"></div>
            <div class="flame"></div>
            <div class="blue-part"></div>
            <div class="thread"></div>
        </div>
        <div class="wax"></div>
        <div class="candle-bottom"></div>
    </div>
</div>

The main container can be positioned on your web page to display the candle illustration. Inside The main container, we have a container that will hold the candle. 

Within the "candle", we further define subcomponents of the candle illustration, including "glow," "flame," "blue-part," "thread," "wax," and "candle-bottom." Each of these subcomponents contributes to the overall realistic depiction of the candle.

Below is the CSS code snippet to style the candle.

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 250px;
    align-items: center;
    justify-content: center;
}

.candle {
    width: 120px;
    height: 385px;
    position: relative;
    display: grid;
}

.top {
    display: flex;
    height: 120px;
    position: relative;
    justify-content: center;
}

.top div{
    position: absolute;   
}

.glow {
    border-radius: 100%;
    width: 70px;
    filter: blur(35px);
    background: #ff6000;
    height: 130px;
    bottom: 0;
    z-index: 2;
    animation: flicker_animation .1s infinite;
}

.flame {
    bottom: 10px;
    z-index: 3;
    width: 18px;
    transform-origin: bottom;
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0px -5px 7px 0px orange;
    background: linear-gradient(white 70%, transparent);
    animation: flame_animation 4s linear infinite, grow_flame 4s linear infinite;
}

.blue-part {
    width: 20px;
    height: 45px;
    background: rgba(0, 133, 255, .7);
    z-index: 2;
    bottom: 5px;
    border-radius: 50% 50% 40% 40%;
}

.thread::after,
.blue-part::after,
.wax::before {
    content: '';
    display: block;
}

.blue-part::after {
    width: 75%;
    border-radius: 50%;
    background: rgb(0 0 0 / 39%);
    position: relative;
    height: 70%;
    margin: 0 auto;
    top: 30%;
}

.thread {
    width: 5px;
    height: 25px;
    margin: 0 auto;
    border-radius: 40% 40% 0 0;
    background: linear-gradient(#ff7800, black 40%);
    bottom: 0;
    z-index: 2;
}

.thread::after {
    width: 100%;
    height: 30%;
    top: 70%;
    position: absolute;
    background: linear-gradient(0deg, #898989, #000000);
}

.wax {
    width: 100%;
    bottom: 15px;
    height: 250px;
    z-index: 1;
    position: absolute;
    background: linear-gradient(180deg, #a7a2a2, #212121);
    box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0px 50px 0 rgba(0, 0, 0, 0.4);
}

.wax::before {
    width: 100%;
    height: 10%;
    bottom: 95%;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(#d1c3ac, #6f6f6f 46%, #817e7c 67%);
}

.candle-bottom {
    bottom: 0;
    position: absolute;
    justify-self: center;
    height: 30px;
    width: 150px;
    border-radius: 50%;
    background: radial-gradient(#121212, #101010);
}

@keyframes flicker_animation {
    50% {
        opacity: 0.8;
    }
}

@keyframes flame_animation {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);

    }
}

@keyframes grow_flame {

    0%,
    100% {
        height: 85%;
    }

    50% {
        height: 100%;
    }

}

By delving into the provided HTML structure and applying CSS styles, you can bring to life this visually stunning candle illustration. The interplay of elements, such as the flickering flame and the wax's texture, adds a touch of realism to your design. 

Feel free to experiment with different styles, colors, and sizes to customize this candle to your liking. Use this creative exercise to hone your HTML and CSS skills while crafting beautiful and detailed visual elements for your web projects.

Download