Mesh Gradient
Gradient Fill · Animated · pure CSS
Four soft color blobs blended into a smooth mesh and clipped to the glyphs, with an optional slow drift. A modern, multi-directional gradient fill.
How it works
Mesh Gradient is an animated gradient fill text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Mesh Gradient exposes 4 dedicated controls — Hue, Spread, Drift and Speed — 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
/* Mesh Gradient — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 400;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
background:
radial-gradient(55% 55% at 18% 22%, hsl(62 58% 62%), transparent 70%),
radial-gradient(55% 55% at 82% 18%, hsl(92 58% 65%), transparent 70%),
radial-gradient(60% 60% at 70% 82%, hsl(122 56% 63%), transparent 70%),
radial-gradient(55% 55% at 25% 78%, hsl(152 58% 60%), transparent 70%),
hsl(107 50% 62%);
background-size: 180% 180%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Animated
- Browser support
- background-clip:text + layered radial-gradient mesh
- Capabilities
- pure