82 CSS Text Effects
Collection of free HTML and CSS text effect code examples. Update of June 2018 collection. 23 new items.
Table of Contents:
Related Articles
- CSS Text Shadow Effects
- CSS Glow Text Effects
- CSS 3D Text Effects
- CSS Text Animations
- CSS Text Glitch Effects
Links
Made with
- HTML / CSS (SCSS)
About the code
Text In A Circle
Text in a circle with CSS variables.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
SVG Text Underline
Use an SVG to highlight a single word within a block of text. The size of the SVG will flex to fit the word and a tag is used to handle semantics.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Animated Blobs Text
Animated Blobs Text by using only CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Stay Positive: Text Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Multiline Background Gradient
Multiline background gradient with mix-blend-mode.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Background Clip CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
DECONSTRUCTED
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Popout Text With Background Image Shadow
Cutting out text from a background and then having it "popout" similar to how text shadow can be used. In fact, this does make use of text shadow!
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
CSS Text Reveal
Simple text reveal with css using pseudo elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Only CSS: Text Slicer Gradient
Please typing your favorite word and change your favorite font-size!
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Cool 3D Text
Cool 3D text with hover state in just CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Refracted Floating Text Effect
This example shows how pure CSS can be used to create an animated refracted floating text effect.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Animated Text-Shadow
A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
SVG/Stroke Animation
Animated quote of the day :) "do something creative everyday" with stroke animations.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Underline Effect
Pure CSS animated underline effect on several lines.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
CSS Gooey Text Transition
A very simple and versatile text morphing effect with a couple editable parameters.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Made with
- HTML / CSS
About the code
Shimmering Neon Text
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Text Stroke + Offset Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Skew Text On Hover
Skew text on hover in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Megaman READY!
Reproducing the famous "READY" from the Megaman games without using JavaScript. This uses CSS Grid extensively and css variables for timing.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Animating Striped Text
Animating striped text with background clip and gradients.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Letters Effect
Letters effect on scroll.
Links
Made with
- HTML
- CSS
- JavaScript (createjs.js)
About the code
Fun Text
Click to re-draw! Mapping sprites to text is always fun.
Links
Made with
- HTML
- CSS/LESS
- JavaScript (tweenmax.js)
About the code
Text Line Animation
Nice text line animation with TweenMax.js.
Links
Made with
- HTML / CSS (SCSS)
About the code
Pop Out Text
Pure CSS pop out text.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS
- JavaScript
About the code
Silent Movie Text Effect
Movie text effect with canvas.
Links
Made with
- HTML
- CSS
- JavaScript (anime.js)
About the code
SVG Text Animation
Nice SVG text animation.
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (tweenmax.js)
About the code
Text Reveal Animation
GSAP text reveal animation.
Onion Skinning Text Morphing
Onion skinning text morphing in HTML/CSS/JS.
Made by John Healey
June 14, 2017
Splitted Text Reveal
HTML, CSS and JavaScript splitted text reveal.
Made by Fabio Ottaviani
June 6, 2017
Animated Text Input
Animated text with HTML, CSS and JS.
Made by Bình Cao
May 19, 2017
Break/Animate Warping Text Paragraph Example
HTML, CSS and JavaScript break/animate warping text paragraph example.
Made by James
January 2, 2017
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.
Made by html5andblog
December 1, 2016
Glitched Text
HTML, CSS and JavaScript glitched text.
Made by Derek Palladino
October 17, 2016
Text Color Draw
Path drawing of text using greensock’s drawSVG plugin.
Made by CJ Gammon
October 15, 2016
Animating SVG Text
HTML, CSS and SVG animating text.
Made by Fabio Ottaviani
September 22, 2016
Shaded Text
Shaded text, a SVG + CSS3 experiment about animated shadows. It isn’t optimized for mobile devices… yet.
Made by Rafael González
September 16, 2016
Second Shadow
Styling text with SVG.
Made by Code School
April 21, 2016
Shadow Parallax
Move your Mouse and Play words. Written by React, ES6, Babel transpiler.
Made by Siamak Mokhtari
January 9, 2016
Squiggly Text
Squiggly text experiment with SVG filters.
Made by Lucas Bebber
October 22, 2015
Shattering Text Animation
GSAP text animation. SVG path shattering. Slow motion on hover.
Made by Arsen Zbidniakov
September 17, 2015
GSAP Text Animation
Text effect using Greensock.
Made by Nate Wiley
August 28, 2015
Colorful Text Animation
Fluid and configurable colorful text animation module made with SCSS.
Made by Hendry Sadrak
July 27, 2015
Animated Text With Snap.svg
Work with this feels like an old good Flash :)
Made by Yoksel
May 17, 2015
CSS Text Stroke
Change the text to see the animation again.
Made by Ignacio Correia
April 27, 2015
Links
Made with
- HTML / CSS
About the code
Blazing Fire
Animated text effects using CSS3 text-shadow to give text headers a blazing flame.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
CSS Text Shadow
Taking a stab at a Lynda.com tutorial. CSS: Advanced Typographic Techniques using lettering.js
Made by Chris Eisenbraun
September 30, 2014
SVG Path Animated Text
Animated the text “Design” based on one SVG path. Click to toggle animation
Made by Tamino Martinius
August 14, 2014
Line Text
Animated text with HTML, CSS and JavaScript.
Made by Johan Fagerbeg
September 22, 2013
3D Text Effect - Mousemove
Nice 3D Text effect with jQuery mousemove.
Made by Dennis Garrn
July 12, 2013
Hover Text
Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel
About the code
Blended Text Layers
Content generated with JS.
Links
Made with
- HTML
- CSS/SCSS
About the code
Spring Text Hover Effect
Just playing around with effects for buttons and thought this was pretty cool.
Links
Made with
- HTML/Pug
- CSS/Sass
About the code
Simple CSS Hover Effect Using Sass Loops
Simple little hover animation. Sass loops make staggering animation delays really easy to do...you can get a lot of mileage out of them.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (polyfill.js)
About the code
Pretty Underline
Pretty underline hover effect.
Links
Made with
- HTML
- CSS/SCSS
About the code
Animated Underlines
Demo of an animated underline effect. Pure CSS animation.
Focus Text Hover Effect
Hover CSS effect for text.
Made by Cameron Fitzwilliam
June 13, 2017
CSS Perspective Text Hover
An experiment using webfonts in combination with CSS 3D transform tools.
Made by James Bosworth
August 22, 2016
3D Hover Text Effect
HTML, CSS and JavaScript 3d hover text effect.
Made by Sascha Sigl
november 20, 2015
Animated Highlighted Text
The idea is simple, it make used of linear gradient and transition.
Made by Rian Ariona
February 19, 2015
Happy Text
HTML and CSS happy text effect.
Made by Bennett Feely
December 6, 2014
Peeled Text Transforms
This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered.
Made by Michiel Bijl
November 25, 2014
Text-Mask Background Moving On MouseMove
Trying the new feature “background-clip: text”, with background moving.
Made by Robert Borghesi
September 23, 2014
Typography Text Neon
Text design (typography) with neon effect.
Made by Prima Utama Apriansyah
March 6, 2014
Rotating Text
3D Quote Rotator
Using GreenSock and the SplitText plugin to create a 3D text effect.
Made by Nate Wiley
November 9, 2015
Rotating Text
HTML, CSS and JavaScript rotating text.
Made by Rachel Smith
May 14, 2015
Vertically Rotating Text
Vertically rotating text with HTML and CSS.
Made by Jacob
July 23, 2014
Text Background
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Attempts at Text with Inline Skewed Background
Using skew is only rendered if the item is display: block or inline-block. Some of these look the same on a wide viewport but fail differently as the viewport width is decreased.
Links
Made with
- HTML / CSS
About the code
Moving Cloud Text
Moving cloud text with HTML and CSS.
Links
Made with
- HTML
- CSS
About the code
Gooey Text Background With SVG Filters
Example of using a gooey SVG filter to create smooth edges around inline text with a background.
Links
Made with
- HTML
- CSS/SCSS
About the code
Text With Video Background
This demo explores creating knockout text/paths in SVG and looping a YouTube video as the fill.
Links
Made with
- HTML
- CSS/SCSS
About the code
Text Background
Text background clipping.
Typing Text
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Typing Effect
Typing effect for text made with a simple JQuery function. Simply call the function with the element you wish to animate as the first argument and the animation speed as the second argument.
Typed Text
HTML, CSS and JavaScript typed text.
Made by Alex
January 11, 2017
Auto Typing Text
Auto typing text with HTML, CSS and JavaScript.
Made by Connor Gaunt
November 8, 2016
LOVE Text Effect
Scrambled text effect inspired by the award winning Science Fiction film “LOVE”.
Made by Matthew Wagerfield
November 2, 2016
Kinetic Type With Greensock
Kinetic Type with HTML, CSS and JavaScript (Greensock).
Made by Nerdmanship
October 14, 2016
Text Scramble Effect
A little text decoding/scramble effect.
Made by Justin Windle
July 6, 2016
Transmission: Glowing Text Animation
A little glowing text animation. First, some JS to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
Made by Stephen Scaff
June 25, 2016
Futuristic Resolving/Typing Text Effect feat. GLaDOS
Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.
Made by Kevin
November 28, 2015
Text Typing Thingamy
HTML, CSS and JavaScript text typing thingamy.
Made by Jack Armley
May 22, 2015
SVG Text: Animated Typing
HTML, CSS and SVG animated typing.
Made by Tiffany Rayside
February 12, 2015
Typing Text With Javascript
Typing text with HTML, CSS and Javascript.
Made by Max
May 19, 2014