Collection of free HTML and CSS text effect code examples (background, hover, rotating, typing, etc.) from Codepen, GitHub and other resources. Update of June 2021 collection. 40 new items.
Related Articles

Links
Made with
- HTML / CSS (Stylus)
About a code
Single div
CSS Cube
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Sliced Text Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
CSS-Only Text Shader
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Lightning Text Skew Idea
A bit inspired by old comics.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
3D Paper Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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

Links
Made with
- HTML / CSS
About a code
Word Underline with CSS & clip-path
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
font-palette
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Variable Fonts Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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

Links
Made with
- HTML / CSS (SCSS)
About a code
Pseudo Element for Fancy text-decoration
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Simple Unexpected Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Reflections with CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Highlight Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Stretchy Heading
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

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

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

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

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

Links
Made with
- HTML / CSS
About a code
Pure CSS Animated 3D Text Effect and Fade In As Outline Text Effect
Pure CSS animated 3D text effect and a fade in as outline text effect. All implemented by leveraging text-shadows CSS property.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Paper Cut-out Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Lightness
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About a code
Cool Spotlight Shadows
Backlit spotlight text casting long shadows.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

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

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

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

Links
Made with
- HTML / CSS (SCSS)
About a code
Gradient Text and ::selection Customization
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Text Stroke CSS Mask Effect
Text overlaid to create a mask effect with CSS text-stroke attribute.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Bold Hover Transition!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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
Colored Text with CSS Masks
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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
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
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 / 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 / CSS (SCSS)
About a code
FeTurbulence, feColorMatrix, feDisplacementMap
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Multi-Line Link Underline Animation
CSS-only multi-line link underline animation on hover.
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
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 (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
- 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
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
About a code
Dual Color Text Scroll Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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
Spring Text Hover Effect
Just playing around with effects for buttons and thought this was pretty cool.
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/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/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
- 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.

Links
Made with
- HTML
- CSS/SCSS
About the code
Animated Underlines
Demo of an animated underline effect. Pure CSS animation.

Links
Made with
- HTML
- CSS/SCSS
About the code
Text Background
Text background clipping.

Links
Made with
- HTML / CSS (SCSS)
About a code
Stripy Rainbow Text Effect
Horizontal striped rainbow text without lots of repeating markup! Just playing around with different CSS properties to create fun CSS only text effects using data-attributes and pseudo elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Onion Skinning Text Morphing
Onion skinning text morphing in HTML/CSS/JS.
Made by John Healey
June 14, 2017

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

Animated Highlighted Text
The idea is simple, it make used of linear gradient and transition.
Made by Rian Ariona
February 19, 2015

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

Happy Text
HTML and CSS happy text effect.
Made by Bennett Feely
December 6, 2014

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

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

Links
Made with
- HTML (Pug) / CSS
About a code
Milky Font Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -