92 CSS Text Effects Collections for Designing Beautiful Websites

This collection includes over 92 different CSS text effects that you can use in your web projects. The effects include drop shadows, 3D transforms, gradients, and many other cool effects.

Discover the power of CSS and create amazing web pages with these awesome text effects.

Glitched: CSS Text Effects

CSS Glitched Text
Demo Image: Glitched – CSS Text Effects

Pure CSS glitched, noisy, analog-y text.
Developed By: Lucas Bebber
Created: JANUARY 11, 2014

Demo Download

Filling with water CSS Text Effects

CSS Text filling with water
Demo Image: Filling with water CSS Text Effects

A text filling with water animation, for preloaders and such.
Developed By: Lucas Bebber
Created: NOVEMBER 11, 2013

Demo Download

CSS Text Effects animation

CSS Text animation
Demo Image: CSS Text Effects animation

Text animation by Yoann HELIN
Developed By: Yoann
Created: NOVEMBER 24, 2013

Demo Download

Drawing with text

Drawing with text
Demo Image: Drawing with text

Draw on the html5 canvas using text as your medium.
Developed By: Tim Holman
Created: OCTOBER 09, 2012

Demo Download

Fun stuff with text and Canvas

Fun stuff with text and Canvas
Demo Image: Fun stuff with text and Canvas

This script uses getImageData to form the text with particles. You can do some fun stuff with text and Canvas this way. Once again I’m using createjs for Canvas manipulation and the greensock library for easy tweening.
Developed By: Rachel Smith
Created: MARCH 11, 2014

Demo Download

Text Scramble Effect

Circles, text and getImageData
Demo Image: Text Scramble Effect

A little CSS text Effects to decoding/scramble effect
Developed By: Justin Windle
Created: JULY 06, 2016

Demo Download

Text particle with canvas

Text particle with canvas
Demo Image: Text particle with canvas

Text particle with canvas.
Developed By: gtibo
Created: MARCH 20, 2016

Demo Download

CSS Only shimmering neon text

CSS Only shimmering neon text
Demo Image: CSS Only shimmering neon text

This is so not what a neon sign looks like, but I stumbled on the effect on accident and thought it looked cool. Select the text and type whatever you want.
Developed By: Giana
Created: MAY 15, 2017

Demo Download

CSS Perspective Text Hover

CSS Perspective Text Hover
Demo Image: CSS Perspective Text Hover

An experiment using web fonts in combination with CSS 3D transform tools.
Developed By: James Bosworth
Created: AUGUST 14, 2016

Demo Download

CSS Beautiful Rotating text animation

CSS Beautiful Rotating text animation
Demo Image: CSS Beautiful Rotating text animation

Developed By: Rachel Smith
Created: MAY 14, 2015

Demo Download

CSS Animated text fill

CSS Animated text fill
Demo Image: CSS Animated text fill

Fill your text with animated background images – no Javascript required, Webkit only.
Developed By: Daniel Riemer
Created: APRIL 13, 2013

Demo Download

CSS & SVG Shaded Text

CSS & SVG Shaded Text
Demo Image: CSS & SVG Shaded Text

Shaded Text, a SVG+CSS3 experiment about animated shadows. It isn’t optimized for mobile devices…
Developed By: Rafael González
Created: SEPTEMBER 16, 2016

Demo Download

Squiggly CSS Text Effects

CSS Squiggly Text
Demo Image: Squiggly CSS Text Effects

Squiggly text experiment with SVG Filters
Developed By: Lucas Bebber
Created: MARCH 13, 2015

Demo Download

SVG text mask

SVG text mask
Demo Image: SVG text mask

Developed By: Marco Barría
Created: NOVEMBER 06, 2013

Demo Download

CSS Kinda Realistic Text

CSS Kinda Realistic Text
Demo Image: CSS Kinda Realistic Text

Kinda realistic text rendering using mostly CSS.
Developed By: Lucas Bebber
Created: MAY 17, 2014

Demo Download

CSS Animate text image fill

CSS Animate text image fill
Demo Image: CSS Animate text image fill

Fill animated background images in text using CSS.
Developed By: Carolina Santos Batista
Created: SEPTEMBER 02, 2016

Demo Download

Text Scratch Using Only CSS

Text Scratch using Only CSS
Demo Image: Text Scratch Using Only CSS

Please type your favorite word 🙂

Developed By: Yusuke Nakaya
Created: OCTOBER 25, 2017

Demo Download

Star Wars 3D Scrolling Text in CSS3 (with music)

Star Wars 3D Scrolling Text in CSS3 (with music)
Demo Image: Star Wars 3D Scrolling Text in CSS3 (with music)

Developed By: Scott Bram
Created: OCTOBER 24, 2012

Demo Download

Typing CSS Text Effects

CSS LOVE Text Effect
Demo Image: Typing CSS Text Effects

Scrambled text effect inspired by the award-winning Science Fiction film LOVE. Ported from a JavaScript jQuery plugin.
Developed By: Matthew Wagerfield
Created: NOVEMBER 23, 2012

Demo Download

CSS Masked Text-Shadow

CSS Masked Text-Shadow
Demo Image: CSS Masked Text-Shadow

Using the CSS3 mask-image property to create a striped text-shadow (Webkit-only).
Developed By: Daniel Riemer
Created: MARCH 24, 2013

Demo Download

Animated text fill with SVG text

Animated text fill with svg text
Demo Image: Animated text filled with SVG text

SVG text effect
Developed By: Cesar C.
Created: FEBRUARY 17, 2015

Demo Download

CSS Gradient Text in Firefox & Webkit

CSS Gradient Text in Firefox
Demo Image: CSS Gradient Text in Firefox

Firefox (& Webkit)-compatible gradient text using CSS blend modes. Looking for ways to simplify.
Developed By: Giana
Created: AUGUST 10, 2015

Demo Download

CSS Text Stroke & Text Border – Infinite effect only using CSS and html5

CSS Text Stroke & Text Border
Demo Image: CSS Text Stroke & Text Border

Trying CSS Stroke and came up with this infinite effect. Change the text to see the animation again.
Developed By: Ignacio Correia
Created: APRIL 11, 2015

Demo Download

Text-mask background moving on MouseMove using CSS and jQuery

Text-mask background moving on MouseMove
Demo Image: Text-mask background moving on MouseMove

Trying the new feature “background-clip: text”, with background moving.
Developed By: Robert Borghesi
Created: SEPTEMBER 12, 2014

Demo Download

CSS Montserrat Text Animation

CSS Montserrat Text Animation
Demo Image: CSS Montserrat Text Animation

Developed By: Claire Larsen
Created: OCTOBER 21, 2015

Demo Download

Hit The Floor CSS Text Effect

Hit The Floor CSS Text Effect
Demo Image: Hit The Floor CSS Text Effect

A cool text style I found that uses only text-shadow
Developed By: ThatGuySam
Created: OCTOBER 21, 2015

Demo Download

CSS -webkit-background-clip: text Polyfill

CSS -webkit-background-clip: text Polyfill
Demo Image: CSS -webkit-background-clip: text Polyfill

A polyfill which replaces the specified element with a SVG in browser where -webkit-background-clip: text is not available.
Developed By: Tim Pietrusky
Created: FEBRUARY 22, 2013

Demo Download

CSS FX Text effect

CSS FX Text effect
Demo Image: CSS FX Text effect

lightning alarm light text effect with css
Developed By: moklick
Created: FEBRUARY 13, 2013

Demo Download

3d Text effect – mousemove

3d Text effect - mousemove
Demo Image: 3d Text effect – mousemove

Nice 3d Text effect with jQuery mousemove
Developed By: Dennis Garrn
Created: JULY 12, 2013

Demo Download

Terminal Text Effect

Terminal Text Effect
Demo Image: Terminal Text Effect

A simple terminal text effect written in vanilla JS, no dependencies. Just copy the function into your code and have fun.
Developed By: Tobias
Created: NOVEMBER 16, 2015

Demo Download

Cascading text effects using CSS and JavaScript

Cascading text effects using CSS and JavaScript
Demo Image: Cascading text effects using CSS and JavaScript

Just a pen for playing around with different text entry transition styles and effects. Made possible with looping from within the style preprocessor and markup preprocessor
Developed By: jh3y
Created: MARCH 01, 2017

Demo Download

Placeholder Typing Text Effect

Placeholder Typing Text Effect
Demo Image: Placeholder Typing Text Effect

A simple script that displays an input’s placeholder text with a ‘human’ typing effect.
Developed By: Michael Smart
Created: JULY 19, 2015

Demo Download

Ball Bouncing On Text

Ball Bouncing On Text
Demo Image: Ball Bouncing On Text

This bouncing ball jumps over the words inside the contentEditable paragraph. The text itself is editable, the jump speed is dynamic, and the ball bounce animation duration is set by the length of each word.
Developed By: Yogev Ahuvia
Created: JUNE 04, 2013

Demo Download

CSS3 text-shadow effects

CSS3 text-shadow effects
Demo Image: CSS3 text-shadow effects

Developed By: Jorge Epuñan
Created: JANUARY 14, 2014

Demo Download

CSS and jQuery Dancing text

CSS and JavaScript Dancing text
Demo Image: CSS and JavaScript Dancing text

jQuery base animated text.
Developed By: Pavel Suraba
Created: OCTOBER 18, 2013

Demo Download

SVG Shattering Text Animation

SVG Shattering Text Animation
Demo Image: SVG Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.
Developed By: Arsen Zbidniakov
Created: SEPTEMBER 17, 2015

Demo Download

SVG video mask on text

SVG video mask on text
Demo Image: SVG video mask on text

SVG video mask on text
Developed By: Simon Evans
Created: JUNE 16, 2017

Demo Download

THREE.js Text Animation Demo 1

THREE.js Text Animation Demo 1
Demo Image: First in a series. THREE.js Text Animation

First in a series of experiments with THREE.js and type.
Developed By: Szenia Zadvornykh
Created: MARCH 22, 2016

Demo Download

THREE.js Text Animation Demo 2

THREE.js Text Animation Demo 2
Demo Image: Second in a series. THREE.js Text Animation

Second in a series of experiments with THREE.js and type.
Developed By: Szenia Zadvornykh
Created: MARCH 28, 2016

Demo Download

THREE.js Text Animation Demo 3

THREE.js Text Animation Demo 3
Demo Image: Fifth in a series. THREE.js Text Animation

Fifth in a series of experiments with THREE.js and type.
Developed By: Szenia Zadvornykh
Created: APRIL 07, 2016

Demo Download

THREE.js Text Animation Demo 4

THREE.js Text Animation Demo 4
Demo Image: Fourth in a series. THREE.js Text Animation

Fourth in a series of experiments with THREE.js and type.
Developed By: Szenia Zadvornykh
Created: APRIL 04, 2016

Demo Download

THREE.js Text Animation Demo 5

THREE.js Text Animation Demo 5
Demo Image: Third in a series. THREE.js Text Animation

Third in a series of experiments with THREE.js and type.
Developed By: Szenia Zadvornykh
Created: APRIL 03, 2016

Demo Download

Canvas text animation

Canvas text animation
Demo Image: Canvas text animation

Developed By: Szenia Zadvornykh
Created: AUGUST 23, 2014

Demo Download

Beautiful Bouncy Canvas text animation

Beautiful bouncy Canvas text animation
Demo Image: Beautiful bouncy Canvas text animation

bouncy canvas text animation
Developed By: Szenia Zadvornykh
Created: JULY 07, 2015

Demo Download

Text effect with Particles

Text effect with Particles
Demo Image: Text effect with Particles

Particles flowing through text. HTML, CSS, JavaScript
Developed By: Szenia Zadvornykh
Created: OCTOBER 02, 2014

Demo Download

CSS Peeled Text Transforms

CSS Peeled Text Transforms
Demo Image: CSS Peeled Text Transforms

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered. For accessibility reasons, I’ve added an aria-label to the paragraph.
Developed By: Michiel Bijl
Created: NOVEMBER 23, 2014

Demo Download

Smoky Text Effect using only CSS

CSS Smoky Text Effect
Demo Image: Smoky Text Effect

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.
Developed By: Bennett Feely
Created: AUGUST 02, 2013

Demo Download

CSS Paper Text

CSS Paper Text
Demo Image: CSS Paper Text

A pure CSS configurable paper text
Developed By: Mattia Astorino
Created: AUGUST 02, 2013

Demo Download

Cloudy text with pixi.js

Cloudy text with pixi.js
Demo Image: Cloudy text with pixi.js

canvas/webgl effects from text. Made this with pixi.js.
Developed By: Rachel Smith
Created: JANUARY 20, 2015

Demo Download

Fluid and configurable Colorful text animation Effect

Fluid and configurable Colorful text animation Effect
Demo Image: Fluid and configurable Colorful text animation Effect

Colorful text animation. Fluid and configurable colorful text animation module made with scss. HTML, CSS, Javascript
Developed By: Hendry Sadrak
Created: JUNE 22, 2015

Demo Download

Webkit Animated “text-shadow” pattern

Webkit Animated text-shadow pattern
Demo Image: Webkit Animated “text-shadow” pattern

Uses -webkit-background-clip: text & linear-gradient to simulate striped text shadow.
Developed By: carpe numidium
Created: DECEMBER 21, 2013

Demo Download

Text Mouse hover effect

Text Mouse hover effect
Demo Image: Text Mouse hover effect

Playing around with a text hover effect using HTML, CSS, JavaScript
Developed By: Nick Pearson
Created: JULY 18, 2014

Demo Download

Text to particles effect

Text to particles effect
Demo Image: Text to particles effect

Edit the text with you favorite name / quote ! You can even insert an emoji :). HTML, Canvas, CSS, JavaScript
Developed By: Louis Hoebregts
Created: JANUARY 08, 2016

Demo Download

SVG Text Mask with Video Fill

SVG Text Mask with Video Fill
Demo Image: SVG Text Mask w/ Video Fill

An editable SVG text mask with HTML5 video fill.
Developed By: Dudley Storey
Created: APRIL 30, 2017

Demo Download

SCSS: Spark Text

SCSS: Spark Text
Demo Image: SCSS: Spark Text

hover with the sperk texts. HTML, CSS, JavaScript
Developed By: Tatsuya Azegami
Created: NOVEMBER 19, 2015

Demo Download

Angled Fractured Text

Star Wars opening crawl using CSS
Demo Image: Star Wars opening crawl using CSS

Creating a fractured text look with just css an extension of the standard effect that uses clip path for the angle.
Developed By: Mandy Michael
Created: MAY 01, 2017

Demo Download

Complex Text Shadow Examples using CSS

Complex Text Shadow Examples using CSS
Demo Image: Complex Text Shadow Examples using CSS

Stuff used: CSS, HTML
Developed By: Chris Coyier
Created: JULY 10, 2012

Demo Download

CSS 3D-Text with Text-Shadow

CSS 3D-Text with Text-Shadow
Demo Image: CSS 3D-Text with Text-Shadow

Nice looking text-effect using CSS 3 text-shadow and rgba-values.
Developed By: Daniel Riemer
Created: DECEMBER 29, 2012

Demo Download

Eye catching intro text

Eye catching intro text
Demo Image: Eye catching intro text

Playing with lettering.js plugin and CSS Animation to create eye catching intro text.
Developed By: Tiffany Rayside
Created: MAY 14, 2014

Demo Download

Collection of CSS text-shadow and pattern effects

Collection of CSS text-shadow and pattern effects
Demo Image: Collection of CSS text-shadow and pattern effects

This pen experiments with some simple text effects you can create using text-shadow and hover transitions. I’ve also played around with creating a patterned hover text effect, mixing those effects with a bit of SVG.
Developed By: Ashley Nolan
Created: JANUARY 19, 2015

Demo Download

Text Transform effect

Text Transform effect
Demo Image: Text Transform effect

This script generate text Transform effect. Stuff used: CSS, HTML, JavaScript
Developed By: Ellgine
Created: JULY 21, 2015

Demo Download

Stylish CSS3 text-shadow

Stylish CSS3 text-shadow
Demo Image: Stylish CSS3 text-shadow

Drew some inspiration from another post on here, had some fun with text-shadow. Stuff used: CSS, HTML
Developed By: Tommy McDonald
Created: FEBRUARY 14, 2013

Demo Download

Exploding Text

Exploding Text
Demo Image: Exploding Text

Velocity and break.js. Stuff used: CSS, HTML, JavaScript
Developed By: Joseph Martucci
Created: SEPTEMBER 25, 2014

Demo Download

GSAP Split Text Animation

GSAP Split Text Animation
Demo Image: GSAP Split Text Animation

Stuff used: CSS, HTML, JavaScript, Greensock
Developed By: Nate Wiley
Created: JULY 24, 2015

Demo Download

CSS Fade text Effect

CSS Fade text Effect
Demo Image: CSS Fade text Effect

Fading text in/out screen view when scrolling. Stuff used: CSS, HTML
Developed By: Teo Dragovic
Created: SEPTEMBER 24, 2013

Demo Download

CSS & SVG fire background text Effect

CSS & SVG fire background text Effect
Demo Image: CSS & SVG fire background text Effect

Text Effect in Html and Css
Developed By: Noor AL-Hassan
Created: FEBRUARY 22, 2015

Demo Download

Webkit background clip text CSS effect

Webkit background clip text CSS effect
Demo Image: Webkit background clip text CSS effect

Use -webkit-background-clip: text and -webkit-fill-text-color : transparent to apply a background to a text on webkit browser.
Developed By: Jintos
Created: NOVEMBER 04, 2014

Demo Download

Blur & Transform Text

Blur & Transform Text
Demo Image: Blur & Transform Text

Text animation with blur and transform. Stuff used: JavaScript, CSS, HTML
Developed By: Eric Grucza
Created: JULY 20, 2016

Demo Download

SVG Text: Animated Typing

SVG Text: Animated Typing
Demo Image: SVG Text: Animated Typing

Stuff used: SVG Text
Developed By: Tiffany Rayside
Created: FEBRUARY 12, 2015

Demo Download

Realistic Text Effect

Realistic Text Effect
Demo Image: Realistic Text Effect

Simple version of Realistic Text Effect, to explain how it works.
Developed By: Lucas Bebber
Created: JUNE 17, 2015

Demo Download

One line of Text Different Color

One line of Text Different Color
Demo Image: One line of Text Different Color

Matching line-heights, gradient stops, and clipped text.
Developed By: Chris Coyier
Created: JANUARY 15, 2015

Demo Download

Typing Text with Javascript

Typing Text with Javascript
Demo Image: Typing Text with Javascript

Developed By: Max
Created: MAY 19, 2014

Demo Download

CSS Animated Fire Text-Shadow

CSS Animated Fire Text-Shadow
Demo Image: CSS Animated Fire Text-Shadow

Developed By: Antti Nyman
Created: MARCH 22, 2013

Demo Download

Pure CSS Text Reveal

Pure CSS Text Reveal
Demo Image: Pure CSS Text Reveal

A pure css Text Reveal Block
Developed By: Mattia Astorino
Created: DECEMBER 23, 2016

Demo Download

Pure CSS 3D Typography

Pure CSS 3D Typography
Demo Image: Pure CSS 3D Typography

Renders best in Chrome. This technique does work in Firefox, but text stroke is not supported.
Developed By: Noah Blon
Created: JULY 01, 2014

Demo Download

Dynamic 3D confetti text

dynamic 3D confetti text
Demo Image: dynamic 3D confetti text

Developed By: Rachel Smith
Created: SEPTEMBER 21, 2015

Demo Download

Text animation path

Text animation path
Demo Image: Text animation path

Developed By: LegoMushroom
Created: APRIL 15, 2014

Demo Download

Mega Shadow Text

Mega Shadow Text
Demo Image: Mega Shadow Text

It’s like text-shadow on steroids
Developed By: Bennett Feely
Created: DECEMBER 10, 2012

Demo Download

Typing text transition

typing text transition
Demo Image: typing text transition

Having a bit of fun with GSAP and SVG. The rainbow color scheme being used here.
Developed By: Rachel Smith
Created: OCTOBER 07, 2017

Demo Download

Text fade-in effect on scroll

Text fade-in effect
Demo Image: Text fade-in effect

Scrappy implementation of a text fade-in effect using lining.js
Developed By: Riley Shaw
Created: NOVEMBER 08, 2014

Demo Download

CSS3 Mouse hover text effect

CSS3 Mouse hover text effect
Demo Image: CSS3 Mouse hover text effect

Using css3 to create the text effect light
Developed By: Max Nguyen
Created: OCTOBER 14, 2013

Demo Download

Title Text Animation

Title Text Animation
Demo Image: Title Text Animation

Title Text Animation with GSAP, TimelineMax
Developed By: Robin Treur
Created: APRIL 02, 2016

Demo Download

Auto generate circular text

Emblem - Auto generate circular text
Demo Image: Emblem – Auto generate circular text

Tiny JS lib to generate a text emblem
Developed By: George Hastings
Created: AUGUST 29, 2016

Demo Download

CSS Text animation

CSS Text animation
Demo Image: CSS Text animation

Text animation with pure css using @keyframes rules
Developed By: Mamun Khandaker
Created: JANUARY 29, 2017

Demo Download

JS/CSS3 Jittery text effect

JS/CSS3 Jittery text effect.
Demo Image: JS/CSS3 Jittery text effect.

Javascript is there to randomize (delay) animations on each letter.
Developed By: ZeroSpree
Created: JUNE 07, 2014

Demo Download

CSS and jQuery swinging text

CSS and jQuery swinging text
Demo Image: CSS and jQuery swinging text

Swinging text effect
Developed By: Mladen Stanojevic
Created: JULY 29, 2014

Demo Download

CSS Glitch text on mouse over with image background

CSS Glitch text with image background
Demo Image: CSS Glitch text with image background

Developed By: Marcel Legane
Created: FEBRUARY 01, 2016

Demo Download

Animating SVG text

Animating SVG text
Demo Image: Animating SVG text

Developed By: Fabio Ottaviani
Created: SEPTEMBER 20, 2016

Demo Download

CSS & jQuery Bubbling Text Effect

CSS & jQuery Bubbling Text Effect
Demo Image: CSS & jQuery Bubbling Text Effect

A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they’re coming from behind the text, and then fade out and are removed.
Developed By: html5andblog
Created: APRIL 30, 2016

Demo Download

Random Text Shuffle

Random Text Shuffle
Demo Image: Random Text Shuffle

Developed By: Sascha Sigl
Created: NOVEMBER 13, 2016

Demo Download

CSS Text Shadow Compilation

CSS Text Shadow Compilation
Demo Image: CSS Text Shadow Compilation

20-something unique examples of text shadows in CSS, from the beautiful to the bizarre to the “do you still use comic sans, too?” type stuff. edit: added Art Deco & Spooky
Developed By: emma
Created: JULY 26, 2013

Demo Download

CSS Filling text effect

CSS Filling text effect
Demo Image: CSS Filling text effect

filling text effect, loading text with css methods background clip, clip rect and pseudo elements.
Developed By: Vangel Tzo
Created: FEBRUARY 03, 2015

Demo Download

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *