font-palette animation
You can animate color fonts between two font-palette values. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
You can animate color fonts between two font-palette values. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.font-palette.animation_computed Experimental | 121 | 121 | | | 121 | |
| CSS property | ||||||
palette-mix function Experimental The palette-mix() CSS function can be used to create a new font-palette value by blending together two font-palette values by specified percentages and color interpolation methods. | 121 | 121 | | | 121 | |
Syntax
@font-palette-values --dark {
font-family: "Color Font";
base-palette: 1;
}
.heading {
font-palette: --light;
transition: font-palette 0.5s;
}
.dark .heading { font-palette: --dark; }Live demo
Use cases
Refine text rhythm
Use font-palette animation to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply font-palette animation when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test font-palette animation in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features