30 CSS Text Effect Examples
Text effects are one of the best ways to add personality to a design without adding complexity. These 30 examples show what is possible with CSS alone, from simple gradients to fully animated scroll-driven effects.
The Complete Web Developer in 2026
40 hours of video
401+ lessons
10 projects
🎉 Code FRIENDS10 for 10% off
Staggered text on scroll
A scroll-driven headline where each line steps down like a staircase. Great reference for stagger timing and text choreography.
Made with:
HTML
CSS
Javascript
Dependencies:
GSAP
View Code and Demo
Razzmatazz cover CSS
A colorful 3D lettering demo with hoverable characters and a playful cover-art feel.
Made with:
HTML
CSS
Javascript
Dependencies:
None
View Code and Demo
Cascading CSS text effects
A sequence of text animations that changes from section to section as you scroll. Useful if you want one page to showcase several styles.
Made with:
HTML
CSS
Javascript
Dependencies:
Splitting.js
ScrollOut
View Code and Demo
Gradient Text
A simple animated gradient fill that works well for hero headlines and marketing copy.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Sliced text effect
A clean sliced-letter treatment made with pure CSS. Good example of doing something distinctive without much markup.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Depth variable font effect
A variable-font demo that adds depth on hover. Nice reference for combining modern type features with motion.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
View Code and Demo
Font stretch effect
Letters stretch apart on hover in a subtle way. Small effect, but very usable in headings and navigation.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Mad Max text effect
A loud poster-style text effect with scaling and color shifts. Best suited for landing pages and bold section headers.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
SVG text animation
Gradient SVG lettering with a stretched hover animation. Useful when plain CSS text effects start to feel too limited.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Perspective text effect
A straightforward perspective treatment that gives flat text more depth without overdoing it.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Scrambling letter effect
Letters scramble into place on hover, which gives the title a hacked or decoded feel.
Made with:
HTML
CSS
JavaScript
Dependencies:
Pug
SCSS
View Code and Demo
Drip text effect
A dripping text style built with pure CSS. More decorative than practical, but well executed.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Text stroke animation
An outlined word animation that focuses on stroke movement instead of fill or shadow.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
Shadow text effect
A stacked shadow effect that creates convincing depth with nothing but text-shadow.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Decode text animation
A hover effect where random characters resolve into readable text. Good pattern for hero copy and interactive labels.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Text shadow effect
A softer shadow treatment where the highlight line makes the text look lit from above.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Cut out typography
A cut-out style that leans on contrast and shadow rather than animation. Good for posters and editorial layouts.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Perfect text outline text
Outlined text that fills on hover. A familiar effect, but this version is polished and easy to reuse.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
CSS cube
A 3D cube built from repeated text faces. More experimental than practical, but a strong showcase of CSS transforms.
Made with:
HTML
CSS
Dependencies:
Stylus
View Code and Demo
Neon text effect
A glowing neon sign effect with good color and blur control. Ideal reference for dark backgrounds.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Butter effect
A chunky multilayer text style that gets its look from repeated shadows and bright colors.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Rainbow effect
Striped rainbow lettering made with pseudo-elements. Good reminder that text effects do not need animation to stand out.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
3D paper text
A folded paper look created with perspective. Strong example of adding dimension without JavaScript.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
3D CSS typography
Rotated 3D typography with a more sculpted feel than a typical shadow-based effect.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
3D sweet text
A glossy 3D text treatment over a soft gradient background. Looks playful without becoming messy.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Color text drawn
A hand-drawn style animation where colorful letters appear as if they are being traced in real time.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Golden metallic 3D text effect
A metallic headline effect with highlights and depth. More decorative, but technically well put together.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Elastic stroke CSS
SVG stroke lettering that bends and rebounds during the animation. Nice reference for more expressive title motion.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Cycling gradient glow
Glowing text with a moving gradient that works well for splashy hero sections.
Made with:
HTML
CSS
Dependencies:
SCSS
Pug
View Code and Demo
Noise text effect mask with @property
A noisy masked text effect that uses @property for smoother animation control. One of the more modern demos in the list.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Looking for more CSS inspiration? Browse our full collection of CSS examples.