Emulsion Burn
Elemental & Nature · Animated · pure CSS
A localized chemical scorch eats the headline like celluloid melting in a projector gate: a white-hot core screens an orange bloom over the letters while a carbonized brown ring multiplies beneath, both masked by a growing @property radius and warped by an feTurbulence displacement so the burn edge crawls. The loop starts mid-burn and eats through, dies out to the clean word, then re-ignites and grows back.
How it works
Emulsion Burn is an animated elemental & nature text effect rendered entirely in CSS. A data-text attribute mirrors the word into ::before/::after layers, so copy that attribute together with the CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Emulsion Burn exposes 5 dedicated controls — Burn Origin, Scorch Spread, Heat Bloom, Char Darkness and Loop — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Emulsion Burn — made with TEXT-FX · https://text-fx.app
* HTML: the element needs a data-text attribute equal to its text; requires the inline <svg> filter defs — see the HTML export.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
@property --text-effect-burn {
syntax: "<length>";
inherits: false;
initial-value: 3.61em;
}
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 900;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
color: hsl(38 42% 88%);
}
.text-effect::before, .text-effect::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
--text-effect-burn: 3.61em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-mask-image: radial-gradient(circle var(--text-effect-burn) at 92% 16%, #000 0%, #000 58%, transparent 74%);
mask-image: radial-gradient(circle var(--text-effect-burn) at 92% 16%, #000 0%, #000 58%, transparent 74%);
pointer-events: none;
animation: text-effect-grow 7.9s ease-in-out infinite;
}
.text-effect::before {
background: radial-gradient(circle var(--text-effect-burn) at 92% 16%, #fff8e6 0%, #ffe0a0 20%, #ff9a24 40%, #d4470a 60%, transparent 74%);
filter: url(#text-effect-scorch) drop-shadow(0 0 6.7px hsl(28 100% 55% / 0.55)) drop-shadow(0 0 20px hsl(28 100% 55% / 0.55));
mix-blend-mode: screen;
}
.text-effect::after {
background: radial-gradient(circle var(--text-effect-burn) at 92% 16%, transparent 0%, transparent 44%, hsl(24 72% 6% / 0.75) 56%, hsl(26 74% 14% / 0.75) 62%, hsl(20 66% 5% / 0.75) 68%, transparent 74%);
filter: url(#text-effect-scorch);
mix-blend-mode: multiply;
}
@keyframes text-effect-grow {
0% { --text-effect-burn: 3.61em; opacity: 1; }
44% { --text-effect-burn: 10.45em; opacity: 1; }
56% { --text-effect-burn: 11.4em; opacity: 0; }
56.01% { --text-effect-burn: 0.57em; opacity: 0; }
60% { --text-effect-burn: 0.95em; opacity: 0.55; }
74% { --text-effect-burn: 2em; opacity: 0.9; }
100% { --text-effect-burn: 3.61em; opacity: 1; }
}
HTML
This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).
<!-- Made with TEXT-FX · https://text-fx.app -->
<style>
@property --text-effect-burn {
syntax: "<length>";
inherits: false;
initial-value: 3.61em;
}
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 900;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
color: hsl(38 42% 88%);
}
.text-effect::before, .text-effect::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
--text-effect-burn: 3.61em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-mask-image: radial-gradient(circle var(--text-effect-burn) at 92% 16%, #000 0%, #000 58%, transparent 74%);
mask-image: radial-gradient(circle var(--text-effect-burn) at 92% 16%, #000 0%, #000 58%, transparent 74%);
pointer-events: none;
animation: text-effect-grow 7.9s ease-in-out infinite;
}
.text-effect::before {
background: radial-gradient(circle var(--text-effect-burn) at 92% 16%, #fff8e6 0%, #ffe0a0 20%, #ff9a24 40%, #d4470a 60%, transparent 74%);
filter: url(#text-effect-scorch) drop-shadow(0 0 6.7px hsl(28 100% 55% / 0.55)) drop-shadow(0 0 20px hsl(28 100% 55% / 0.55));
mix-blend-mode: screen;
}
.text-effect::after {
background: radial-gradient(circle var(--text-effect-burn) at 92% 16%, transparent 0%, transparent 44%, hsl(24 72% 6% / 0.75) 56%, hsl(26 74% 14% / 0.75) 62%, hsl(20 66% 5% / 0.75) 68%, transparent 74%);
filter: url(#text-effect-scorch);
mix-blend-mode: multiply;
}
@keyframes text-effect-grow {
0% { --text-effect-burn: 3.61em; opacity: 1; }
44% { --text-effect-burn: 10.45em; opacity: 1; }
56% { --text-effect-burn: 11.4em; opacity: 0; }
56.01% { --text-effect-burn: 0.57em; opacity: 0; }
60% { --text-effect-burn: 0.95em; opacity: 0.55; }
74% { --text-effect-burn: 2em; opacity: 0.9; }
100% { --text-effect-burn: 3.61em; opacity: 1; }
}
</style>
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-scorch" x="-40%" y="-40%" width="180%" height="180%">
<feTurbulence type="fractalNoise" baseFrequency="0.03 0.05" numOctaves="4" seed="11" result="n">
<animate attributeName="baseFrequency" dur="11.9s" values="0.03 0.05;0.05 0.065;0.03 0.05" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="n" scale="16" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs></svg>
<div data-text="Your text" class="text-effect">Your text</div>
- Category
- Elemental & Nature
- Type
- Animated
- Browser support
- SVG feTurbulence displacement + background-clip:text masked by an animated @property radius; screen/multiply blend
- Capabilities
- dataText, svgDefs, property