A walkthrough of creating an animated radial gradient mask effect over text using CSS. Covers the CSS `mask` property with `repeating-radial-gradient`, how to center the gradient origin around a specific letter, using `@property` (CSS Houdini) to make custom properties animatable, and browser compatibility quirks in Firefox and Safari. Includes tips on tweaking stripe thickness and spacing via a CSS custom property.
Table of contents
The fontCSS mask + repeating-radial-gradientMore on @property --stripesBrowser compatibilityWee181.1K Impressions10 Comments