Collection of free HTML and CSS text effect code examples. Update of May 2020 collection. 11 new items.
Related Articles
- CSS Text Shadow Effects
- CSS Glow Text Effects
- CSS 3D Text Effects
- CSS Text Animations
- CSS Text Glitch Effects
- CSS Typing Text Effects
- JavaScript Text Effects

Links
Made with
- HTML / CSS (SCSS)
About a code
Retro Text Effect
Pure CSS retro text effect with mask-image
, text-stroke
, and background-clip
properties.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Mapping Mouse Position in CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS text-emphasis
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
CSS+SVG Motion Blur Text Effect
A demo of using SVG filters in CSS to create some stunning text effects.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Multilayer Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Sticker
A reusable .sticker
with CSS variables to adjust the gradient colors and the shine angle.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Fixed Conic Fill
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Gradient Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Drop Capital - ::first-letter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Split Text with clip-path
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
3D Letters Sugar Sweet
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
CSS in CSS with a lot of C and S
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
writing-mode
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Underline Clip Hover Animation
A fancy animated underline using text clipping. The text uses background-clip: text
and a linear-gradient
background to be bi-color. We get around animating the gradient by animating the background-position
instead. We have to use a wrapper element for having the underline highlight under the text since the text color is already the background!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
CSS Arcade Typography: Snow Bros. (1990)
Pixelated typeface from the arcade game Snow Bros. Drawn in CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Twenty Twenty & Multi-Color Gradients
Multi-colour gradients clipped with CSS, blended with SVG's feGaussianBlur
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Layered text-shadow Effect CSS
text-shadow
is a fun little CSS style that can spark up any simple text into a beautiful work of art.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Typo Triple
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Multi Line Text Fat Underline Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
SAVE
Quirky CSS banner using box-shadow
s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Multi-line-truncation in Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Sliding Perspective
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
80s Fonts Text Effect 4: Cyberspace Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Multi-line Animated Underline Text Effects
Multi-line animated underline text effects with simple customization. Animation's settings are implemented with CSS custom properties so you can change values directly in the browser.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Custom Multiline Text Underline with Rounded Caps
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Western Electric Big Button Phone
A recreation of the Western Electric Big Button phone produced in the 1970s. Recreated using flexbox, grid, text shadows, and text strokes. This pen encountered several CSS quirks. First, is that setting aborder-radius
andoverflow: hidden
breaks anti-aliasing on theborder-radius
, leaving a jagged appearance. This was worked around a bit by adding a very soft lightbox-shadow
on the side that has theborder-radius
. This alleviates the problem somewhat. Second,text-stroke
is still crudely implemented in browsers. All text strokes are drawn on the outside of the glyph which changes the shape of the glyph. Additionally, text shadows are sized using the inside of the glyph and end up smaller. To work around this, I oversized thetext-stroke
and then tried to position each glyph so that the stroke slightly overflowed the container and was cut off. This gives a smoother appearance, but is imprecise and cuts a few of the characters off.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Multiline Text Strikthrough
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Outline Text Effect
Simple text outline effect using on basic CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Back in Black
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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: -

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

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

Squiggly Text
Squiggly text experiment with SVG filters.
Made by Lucas Bebber
October 22, 2015

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
About the code
Animated Underlines
Demo of an animated underline effect. Pure CSS animation.

CSS Perspective Text Hover
An experiment using webfonts in combination with CSS 3D transform tools.
Made by James Bosworth
August 22, 2016

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

Vertically Rotating Text
Vertically rotating text with HTML and CSS.
Made by Jacob
July 23, 2014

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.

Links
Made with
- HTML / CSS (SCSS)
About a code
Pinchy Type with CSS text-shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

SVG Text: Animated Typing
HTML, CSS and SVG animated typing.
Made by Tiffany Rayside
February 12, 2015

Links
Made with
- HTML / CSS (SCSS)
About a code
background-clip:text
CSS effect
Use background-clip: text
and fill-text-color: transparent
to apply a background to a text.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -