CSS letter-spacing can be used creatively to build text reveal animations without JavaScript. By setting a large negative letter-spacing value, characters overlap and become visually hidden; animating back to zero or positive values reveals the text. Combined with color transitions, overflow: clip, text-indent, ::first-letter, and ::first-line pseudo-elements, you can build interactive effects like checkbox-triggered text swaps and acronym expansions on hover. Code examples are provided for each technique.
Table of contents
Overlapping and separating lettersShowing and hiding textUsing with other glyph box stylingWhat else can we do?Sort: