Mon Jan 02 2023
How to Add Fire Effect on Text
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.
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)
