Text & Typography
Text effects, kinetic typography, splitting and variable fonts.
How to bring your text to life? These 56 CSS and JavaScript text effects cover all modern techniques: gradient text, character animation, glitch effects, typewriter, scroll reveal and more. Each effect is optimized for performance and comes with its complete source code.
Animated Gradient
Gradient that moves through the text in a loop.
Typing Effect
Typing simulation with blinking cursor.
Glitch Effect
Cyberpunk-style digital distortion.
Slide Reveal
Text that appears from below. Click to replay.
Wave Effect
Each letter waves with a progressive delay.
Stroke Animation
Progressive fill of outlined text.
Shadow Pop
Shadow that grows on hover for a 3D effect.
Blur Reveal
Text that progressively unblurs. Click to replay.
Neon Flicker
Neon effect with realistic flickering.
Split Color
Two-tone text with animated split.
Neon Flicker Text
Text with neon glow that flickers like a real sign.
3D Extrude Text
Text with 3D extrusion effect on hover.
Variable Font Weight
Font weight animation on hover.
Scramble Text
Character scrambling effect on hover.
Wave Animation V2
Wave animation with progressive delay per letter.
Highlight Marker
Highlighter effect that appears on hover.
3D Shadow Depth
3D shadow with depth that extends on hover.
Flip Characters
Each character flips on hover.
Outline to Fill
Outline text that fills in on hover.
Gradient Flow
Multicolor gradient that scrolls continuously.
Neon Glow
Luminous neon effect with flickering.
Blur to Sharp
Blurred text that sharpens on hover.
Letter Spacing
Letter spacing that expands on hover.
Clip Path Reveal
Text that reveals progressively. Click to replay.
Letter Fade In
Each letter fades in with a staggered delay for smooth reveal.
Letter Slide Up
Letters slide up from below one by one for a smooth entrance.
Letter Rotate In
Letters rotate into view with a 3D flip effect.
Word by Word
Words appear one at a time for dramatic text reveals.
Scramble Text
Text scrambles through random characters then resolves like a decoder.
Wave Animation
Letters wave up and down continuously with offset timing.
Bounce In Letters
Letters bounce in with elastic easing for playful animations.
Typewriter Delete
Types text, deletes it, then types new text in a cycle.
Split Hover
Letters scatter on hover and reform when mouse leaves.
Gradient Letter Flow
Gradient color flows through each letter sequentially.
Scatter to Word
Characters fly from random positions and assemble into a word on load or click.
Wave Text
Each letter oscillates vertically with offset timing creating a continuous wave.
Elastic Bounce Letters
Text stretches and bounces with spring physics on appearance.
Magnetic Cursor Text
Individual characters are attracted towards the cursor position.
Gravity Drop Text
Letters fall from above with gravity and bounce on the baseline.
Text Whirlpool
Characters orbit in a circular pattern then settle into readable text.
Typewriter Glitch
Classic typewriter with random glitch interruptions (character swaps, flickers).
Breathing Text
Text subtly expands and contracts like breathing, staggered per word.
Text Shuffle Reveal
Characters rapidly cycle through random letters before locking into the correct one.
Parallax Depth Text
Multi-layered text moving at different speeds on mouse movement, creating 3D depth.
Liquid Stretch Text
Letters stretch like caramel on hover with elastic return.
Text Explosion
Click to scatter characters with physics, click again to reassemble them.