Image Fill
Fill & Texture · Static · pure CSS
Glyphs filled with a rich multi-gradient that reads like a photographic texture, via background-clip:text. An image-in-text look with zero assets.
CSS
/* Image Fill — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 400;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
background: radial-gradient(120% 90% at 22% 18%, hsl(161 100% 78%) 0%, hsl(153 95% 66%) 16%, transparent 42%),
radial-gradient(90% 80% at 82% 30%, hsl(113 90% 62%) 0%, transparent 45%),
radial-gradient(140% 120% at 70% 92%, hsl(193 85% 58%) 0%, transparent 55%),
linear-gradient(150deg, hsl(353 70% 48%) 0%, hsl(13 75% 30%) 55%, hsl(333 65% 40%) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 100% 100%;
filter: drop-shadow(0 0 10px hsl(153 90% 55% / 0.45));
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Fill & Texture
- Type
- Static
- Browser support
- background-clip:text (all modern, -webkit- prefixed)
- Capabilities
- pure