90+ CSS Text Effects: Free Code Examples & UI Snippets (Page 4)

SVG Line Drawing Animation creates an intricate, continuous vector drawing loop. A GSAP script measures the precise pixel length of every SVG <path> using getTotalLength(), then masks the strokes via strokeDasharray. Using staggered timeouts and GSAP transforms on strokeDashoffset, the lines are dynamically “drawn” and “erased” across the screen. It is a highly smooth and performance-optimized rendering showcase.

HTML5 Canvas Particle Reveal maps vector typography into an interactive particle swarm. Utilizing the CreateJS framework, it samples random coordinates inside each letter’s boundary, verifying collisions with the vector path using .hitTest(). If they intersect, a circular shape clone spawns and scales up with a staggered tween delay. Clicking resets and regenerates the particle layout.

Gooey Liquid Alphabet Loop implements an organic, morphing letter transition on pure CSS. It deploys ::before and ::after pseudo-elements to swap characters dynamically using keyframe-driven content properties. Applying an SVG gooey filter over the parent wrapper melts the swapping shapes together, creating a fluid, liquid-metal transition loop.

Sliding Striped Typography implements an animated candy-stripe text fill on pure CSS. It styles the hollow “Bungee Shade” font with transparent text-fill color. A repeating, diagonal linear-gradient is tiled with background-size and masked inside the letters using background-clip: text. An infinite keyframe shift on background-position then slides the stripes smoothly.

Gooey Liquid Alphabet Loop implements an organic, morphing letter transition on pure CSS. It deploys ::before and ::after pseudo-elements to swap characters dynamically using keyframe-driven content properties. Applying an SVG gooey filter over the parent wrapper melts the swapping shapes together, creating a fluid, liquid-metal transition loop.

3D Refraction Text Animation implements an organic, underwater optical illusion using a single empty h1 element. It duplicates the text using content: attr(aria-label) on pseudo-elements. The ::before and ::after layers handle the top and bottom halves, cropped using clip-path. Coordinated keyframes tilt the bottom layer on rotateX(), simulating realistic water refraction.

SVG Letter Drawing Animation uses purely declarative CSS to write out a complex, handwritten motto. It targets inline SVG path elements, setting custom stroke-dasharray lengths on load. Staggered keyframes then animate stroke-dashoffset to “draw” the outlines, followed by a transition that fills the letters with solid colors. A click listener reruns the loop.

Interactive Multi-Line Underlines demonstrates an elegant, CSS-only solution to animate highlights across wrapped text blocks. By applying custom, colored linear-gradient background images directly onto inline elements, the text wraps naturally. On hover, transitioning background-size from 0 to 100% makes the highlights expand and flow across multiple lines without JavaScript.