A tutorial demonstrating how to create a per-letter fading text effect using CSS custom properties and JavaScript. The technique involves splitting text into individual characters wrapped in spans, then applying CSS calc() functions with blur filters and opacity based on character index variables. The author also explores alternative approaches like nth-child selectors and background-clip gradients.

2m read timeFrom cassidoo.co
Post cover image
Table of contents
Other solutionsFinal result
3 Comments

Sort: