OneTaskBy Tim King · Updated
Fire Text Effect
Flickering Layered Text Shadows That Rise Like Flames Off Letters
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Fire Text Effect works
This fire text effect generator sets your words alight with layers of glowing shadow that lick upwards and flicker from side to side. Set the text, size, three flame colours and speed, then copy the HTML and CSS.
Flaming text suits sale banners, game titles, hot-sauce labels and anything billed as "hot".
How the fire text effect works
The flames are stacked text-shadow layers. Each sits a little higher than the last and grows more
blurred, moving from a pale inner colour to a deep orange at the top. The keyframe shifts the layers
sideways in opposite directions, so the fire sways and flickers without any images.
Getting the best flames
Fire shows up best on a very dark background with heavy, bold lettering. Short words and large sizes give the shadows room to rise; small text turns the flames into a blurry glow.
FAQ
Does the fire text effect work on a light background?
It works, but the flames lose contrast and look like a smudge. Fire is light, so it needs a dark backdrop. On light pages, put the text on a dark strip or card instead.
Can screen readers read the flaming text?
Yes. The text is ordinary text in the page and the flames are only shadows, so screen readers, search engines and copy and paste all treat it as normal text.
Will the flicker bother people sensitive to motion?
The copied CSS includes a prefers-reduced-motion rule that stops the flicker, leaving the flames still, so visitors who ask for less motion still see the fiery look.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Glow Effect
Neon glow for headings and buttons, pure CSS.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Text Animation
Animate a headline letter by letter and copy the CSS.
Glitch Text Effect
Jittery RGB-split text that looks like a broken screen.
Sparkle Text Effect
Little stars that twinkle around a word or heading.