Scrolling Weave
Fill & Texture · Animated · pure CSS
A fine two-tone crosshatch weave clipped to the text that scrolls diagonally on a loop. A moving woven material fill.
How it works
Scrolling Weave is an animated fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Scrolling Weave exposes 3 dedicated controls — Hue, Weave 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
/* Scrolling Weave — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Space Grotesk', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
background: repeating-linear-gradient(-45deg, transparent 0 14px, hsl(160 52% 64% / 0.28) 14px 15px), repeating-linear-gradient(45deg, hsl(320 50% 58%) 0 14px, hsl(344 48% 48%) 14px 28px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: text-effect-weave 15.6s linear infinite;
}
@keyframes text-effect-weave {
to { background-position: 28px 28px, 28px -28px; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Fill & Texture
- Type
- Animated
- Browser support
- background-clip:text + scrolling repeating-linear-gradient crosshatch
- Capabilities
- pure