Mon Jan 02 2023

How to Add Fire Effect on Text

CSS3675 views

Creating dynamic and visually appealing web designs is always a fun challenge for web designers. One of them is the fire effect on text, which can make the text appear as though it's burning or glowing like fire. In this article, we'll follow the steps of creating a fire effect on text using only HTML and CSS.

Step 1: Setting Up HTML

First, create an HTML file with a basic structure to display the text that will have the fire effect applied to it.

<section>
<h1>Happy New Year</h1>
</section>

Step 2: Writing CSS for the Fire Effect

Now, we'll apply CSS to create the fire effect. We'll use text-shadow to create the glowing and fiery aura around the text and @keyframes for the animation.

h1 {
font-size: 65px;
color: #fff;
text-shadow: 0 3px 20px red,
0 0 20px red,
0 0 10px orange,
4px -5px 6px yellow,
-4px -10px 10px yellow,
0 -10px 30px yellow;
animation: fire 2s infinite alternate linear;
}
@keyframes fire {
0% {
text-shadow: 0 3px 20px red,
0 0 20px red,
0 0 10px orange,
4px -5px 6px yellow,
-4px -10px 10px yellow,
0 -10px 30px yellow;
}

25% {
text-shadow: 0 3px 20px red,
0 0 20px red,
0 0 10px orange,
-2px -5px 5px yellow,
3px -10px 10px yellow,
-4 -15px 20px yellow;
}

50% {
text-shadow: 0 3px 20px red,
0 0 20px red,
0 -5px 10px orange,
3px -10px 10px yellow,
-4px -15px 20px yellow,
2px -20px 30px yellow;
}

75% {
text-shadow: 0 3px 20px red,
0 0 20px red,
0 -5px 10px orange,
3px -10px 5px yellow,
2px -20px 30px yellow,
0 -25px 40px yellow;
}

100% {
text-shadow: 0 3px 20px red,
0 0 10px red,
0 0 0 orange,
0 0 5px yellow,
-2px -5px 5px yellow,
4px -10px 10px yellow;
}
}

Optional Enhancements

You can take the effect even further by:

  • Adding background flames or particle effects using CSS or JavaScript.

  • Using SVG flames or fire images as background to enhance realism.

  • Experimenting with CSS blend modes to create different effects for your fire animation.

Conclusion

Adding a fire effect to text using HTML and CSS is a fun and creative way to enhance your web design. With just a few lines of code, you can create a glowing, flickering effect that will make your text stand out. Feel free to customize the effect further by playing with the colors, shadow sizes, and animation speed to fit your design needs.

How to Add Fire Effect on Text

File Name: text-on-fire.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy New Year</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Codystar&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Codystar', cursive;
        }

        body {
            background-color: #292929;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h1 {
            font-size: 65px;
            color: #fff;
            text-shadow: 0 3px 20px red,
                            0 0 20px red,
                            0 0 10px orange,
                            4px -5px 6px yellow,
                            -4px -10px 10px yellow,
                            0 -10px 30px yellow;
            animation: fire 2s infinite alternate linear;

        }

        @keyframes fire {
            0% {
                text-shadow: 0 3px 20px red,
                            0 0 20px red,
                            0 0 10px orange,
                            4px -5px 6px yellow,
                            -4px -10px 10px yellow,
                            0 -10px 30px yellow;
            }

            25% {
                text-shadow: 0 3px 20px red,
                            0 0 20px red,
                            0 0 10px orange,
                            -2px -5px 5px yellow,
                            3px -10px 10px yellow,
                            -4 -15px 20px yellow;
            }

            50% {
                text-shadow: 0 3px 20px red,
                            0 0 20px red,
                            0 -5px 10px orange,
                            3px -10px 10px yellow,
                            -4px -15px 20px yellow,
                            2px -20px 30px yellow;
            }

            75% {
                text-shadow: 0 3px 20px red,
                            0 0 20px red,
                            0 -5px 10px orange,
                            3px -10px 5px yellow,
                            2px -20px 30px yellow,
                            0 -25px 40px yellow;
            }

            100% {
                text-shadow: 0 3px 20px red,
                            0 0 10px red,
                            0 0 0 orange,
                            0 0 5px yellow,
                            -2px -5px 5px yellow,
                            4px -10px 10px yellow;
            }
        }

    </style>
</head>
<body>
    <section>
        <h1>Happy New Year</h1>
    </section>
</body>
</html>

Result Screenshot(s)

How to Add Fire Effect on TextWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.