Creating Fire in CSS (Tutorial)

Описание: Create this realistic Fire Animation with Glowing Light Effects using pure HTML & CSS — no JavaScript, no images!
Add glow to nearby objects and text for a magical lighting effect.

Inspired by flame effect ideas seen in Doki theme and animated campfire UIs.
🔥 Credit: Doki Theme Inspiration

👇 Copy the code below to try it yourself!
⚡ Credits & Inspiration

code-
.fire-wrapper {
position: relative;
width: 80px;
height: 120px;
}

.flame {
position: absolute;
bottom: 0;
border-radius: 50% 50% 40% 40%;
filter: blur(1.5px);
transform-origin: bottom center;
opacity: 0.9;
mix-blend-mode: screen;
}

.flame1 {
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, #ffcc00 10%, #ff6600 70%, transparent 100%);
animation: flameMove1 1.8s infinite ease-in-out;
z-index: 1;
}
.flame2 {
width: 70%;
height: 90%;
left: 15%;
background: radial-gradient(ellipse at center, #ffff33 10%, #ff3300 70%, transparent 100%);
animation: flameMove2 2s infinite ease-in-out;
z-index: 2;
}
.flame3 {
width: 50%;
height: 80%;
left: 25%;
background: radial-gradient(ellipse at center, #fff700 10%, #ff0000 70%, transparent 100%);
animation: flameMove3 2.2s infinite ease-in-out;
z-index: 3;
}
.glow {
position: absolute;
width: 140%;
height: 30%;
bottom: -10px;
left: -20%;
background: radial-gradient(circle, rgba(255, 140, 0, 0.3), transparent 80%);
border-radius: 50%;
filter: blur(10px);
animation: glowPulse 2s infinite ease-in-out;
}
.rock {
position: absolute;
bottom: 30px;
width: 100px;
height: 20px;
background: radial-gradient(ellipse at center, #422b1c 20%, #1c120c 100%);
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 80, 0, 0.3);
}
.glow-text {
position: absolute;
bottom: 160px;
font-size: 16px;
color: #ffc;
text-shadow: 0 0 8px rgba(255, 200, 100, 0.7),
0 0 16px rgba(255, 120, 0, 0.5),
0 0 32px rgba(255, 60, 0, 0.3);
animation: flickerText 2s infinite ease-in-out;
}
@keyframes flameMove1 {
0%, 100% { transform: scaleY(1) translateY(0) rotate(0deg); }
50% { transform: scaleY(1.05) translateY(-8px) rotate(-2deg); }
}
@keyframes flameMove2 {
0%, 100% { transform: scaleY(1) translateY(0) rotate(0deg); }
50% { transform: scaleY(1.05) translateY(-6px) rotate(1.5deg); }
}
@keyframes flameMove3 {
0%, 100% { transform: scaleY(1) translateY(0) rotate(0deg); }
50% { transform: scaleY(1.02) translateY(-3px) rotate(-1deg); }
}
@keyframes glowPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@keyframes flickerText {
0%, 100% { text-shadow: 0 0 6px rgba(255, 200, 100, 0.6); }
50% { text-shadow: 0 0 12px rgba(255, 120, 0, 0.7); }
}


Song: Dosi & Aisake - Cruising [NCS Release]
Music provided by NoCopyrightSounds
Free Download/Stream: http://ncs.io/Cruising
Watch: http://ncs.lnk.to/CruisingAT/youtube

📌 Subscribe for more CSS magic and creative web design effects!
#CSSOnly #CSSAnimation #PureCSS #FireEffect #GlowingText #FrontendDesign #HTMLandCSS #CSSArt #WebAnimation #CreativeCoding