Nabla Palette Cycle
3D & Depth · Animated · pure CSS
Nabla's real COLRv1 glyphs — isometric 3D blocks whose extrusion, highlights and shadows are baked into the font's own paint layers — recolored by two custom palettes that endlessly cross-fade between your hues. A genuine color-font depth effect, not a text-shadow fake.
How it works
Nabla Palette Cycle is an animated 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Nabla Palette Cycle exposes 4 dedicated controls — Palette A, Palette B, Cycle and Cycle — 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
/* Nabla Palette Cycle — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Nabla', system-ui (load from Google Fonts).
*/
@font-palette-values --text-effect-pa {
font-family: "Nabla";
base-palette: 0;
override-colors:
0 hsl(98 90% 84%),
1 hsl(98 87% 79%),
2 hsl(98 85% 74%),
3 hsl(98 82% 68%),
4 hsl(98 79% 63%),
5 hsl(98 76% 58%),
6 hsl(98 74% 53%),
7 hsl(98 71% 47%),
8 hsl(98 68% 42%);
}
@font-palette-values --text-effect-pb {
font-family: "Nabla";
base-palette: 0;
override-colors:
0 hsl(245 90% 84%),
1 hsl(245 87% 79%),
2 hsl(245 85% 74%),
3 hsl(245 82% 68%),
4 hsl(245 79% 63%),
5 hsl(245 76% 58%),
6 hsl(245 74% 53%),
7 hsl(245 71% 47%),
8 hsl(245 68% 42%);
}
.text-effect {
font-family: 'Nabla', system-ui;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
font-palette: --text-effect-pa;
animation: text-effect-palette 8.9s ease-in-out infinite alternate;
}
@keyframes text-effect-palette {
from { font-palette: --text-effect-pa; }
to { font-palette: --text-effect-pb; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Animated
- Browser support
- Color font (COLRv1); palette animation is smooth in Chromium, stepped elsewhere.
- Capabilities
- pure