Collection of free HTML and CSS text effect code examples: background, hover, rotating, typing, etc. Update of April 2019 collection. 21 new items.

71 CSS Text Effects

Collection of free HTML and CSS text effect code examples. Update of April 2019 collection. 21 new items.

Related Articles

  1. CSS Text Shadow Effects
  2. CSS Glow Text Effects
  3. CSS 3D Text Effects
  4. CSS Text Animations
  5. CSS Text Glitch Effects
  6. JavaScript Text Effects

Demo image: Split Text with clip-path

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

Split Text with clip-path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: 3D Letters Sugar Sweet

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

3D Letters Sugar Sweet

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS in CSS with a lot of C and S

Author

  • Giulia Cardieri

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

Demo image: writing-mode

Author

  • CSS GRID

Made with

  • HTML / CSS

About a code

writing-mode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Marwan Zibaoui

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

Demo image: CSS Arcade Typography: Snow Bros. (1990)

Author

  • Lynn Fisher

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

Demo image: Twenty Twenty & Multi-Color Gradients

Author

  • Leena Lavanya

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

Demo image: Layered text-shadow Effect CSS

Author

  • Shireen Taj

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

Demo image: Typo Triple

Author

  • creatz

Made with

  • HTML / CSS

About a code

Typo Triple

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mark

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

Demo image: SAVE

Author

  • Sebastian Opperman

Made with

  • HTML / CSS (SCSS)

About a code

SAVE

Quirky CSS banner using box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Benjamin Solum

Made with

  • HTML / CSS (SCSS)

About a code

Multi-line-truncation in Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Dipinto

Made with

  • HTML / CSS

About a code

Sliding Perspective

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ion Emil Negoita

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

Author

  • Stas Melnikov

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

Demo image: Custom Multiline Text Underline with Rounded Caps

Author

  • ash

Made with

  • HTML / CSS

About a code

Custom Multiline Text Underline with Rounded Caps

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Western Electric Big Button Phone

Author

  • Alex

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 a border-radius and overflow: hidden breaks anti-aliasing on the border-radius, leaving a jagged appearance. This was worked around a bit by adding a very soft light box-shadow on the side that has the border-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 the text-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: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS)

About a code

Multiline Text Strikthrough

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Outline Text Effect

Author

  • Jamie Hammond

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

Demo image: Back in Black

Author

  • David Lillo

Made with

  • HTML / CSS

About a code

Back in Black

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Neon Light Text

Author

  • Sarah Fossheim

Made with

  • HTML / CSS

About a code

Neon Light Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Text In A Circle

Author

  • Michelle Barker

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

Demo image: SVG Text Underline

Author

  • Andrew Spencer

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

Author

  • Amli

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

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS)

About the code

Stay Positive: Text Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Multiline Background Gradient

Author

  • Matthias Ott

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

Author

  • Amir

Made with

  • HTML / CSS (SCSS)

About the code

Background Clip CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ben Szabo

Made with

  • HTML / CSS

About the code

DECONSTRUCTED

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • MARK

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

Author

  • Andrés Sánchez

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

Author

  • Yusuke Nakaya

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

Author

  • Ashish Anand

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

Author

  • George W. Park

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

Author

  • Erin E. Sullivan

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

Author

  • Mansoour

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

Author

  • cecile

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

Author

  • Mike Golus

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

Author

  • Comehope

Made with

  • HTML / CSS

About the code

Shimmering Neon Text

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Text Stroke + Offset Shadow

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Text Stroke + Offset Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • delpher

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

Author

  • Christopher Wallis

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

Author

  • Mandy Michael

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

Demo image: Letters Effect

Author

  • Stefano Perelli

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Letters Effect

Letters effect on scroll.

Demo image: Fun Text

Author

  • Sebastian DeRossi

Made with

  • HTML
  • CSS
  • JavaScript (createjs.js)

About the code

Fun Text

Click to re-draw! Mapping sprites to text is always fun.

Demo image: Text Line Animation

Author

  • John Healey

Made with

  • HTML
  • CSS/LESS
  • JavaScript (tweenmax.js)

About the code

Text Line Animation

Nice text line animation with TweenMax.js.

Author

  • Nathan Taylor

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

Demo image: Silent Movie Text Effect

Author

  • Dimitra Vasilopoulou

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Silent Movie Text Effect

Movie text effect with canvas.

Demo image: SVG Text Animation

Author

  • Cassie Evans

Made with

  • HTML
  • CSS
  • JavaScript (anime.js)

About the code

SVG Text Animation

Nice SVG text animation.

Demo image: Text Reveal Animation

Author

  • Artur Sedlukha

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (tweenmax.js)

About the code

Text Reveal Animation

GSAP text reveal animation.

Demo Image: Onion Skinning Text Morphing
Demo Image: Onion Skinning Text Morphing

Onion Skinning Text Morphing

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

Demo Image: Shaded Text
Demo Image: Shaded Text

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

Demo Image: Second Shadow
Demo Image: Second Shadow

Second Shadow

Styling text with SVG.
Made by Code School
April 21, 2016

Demo Image: Squiggly Text
Demo Image: Squiggly Text

Squiggly Text

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

Author

  • Makan

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

Demo image: Spring Text Hover Effect

Author

  • Nathan Taylo

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.

Demo image: Simple CSS Hover Effect Using Sass Loops

Author

  • Charlie Marcotte

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.

Demo image: Animated Underlines

Author

  • Ragnar Þór Valgeirsson

Made with

  • HTML
  • CSS/SCSS

About the code

Animated Underlines

Demo of an animated underline effect. Pure CSS animation.

Demo Image: CSS Perspective Text Hover
Demo Image: CSS Perspective Text Hover

CSS Perspective Text Hover

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

Demo Image: Animated Highlighted Text
Demo Image: Animated Highlighted Text

Animated Highlighted Text

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

Demo Image: Happy Text
Demo Image: Happy Text

Happy Text

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

Demo Image: Peeled Text Transforms
Demo Image: Peeled Text Transforms

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

Demo Image: Typography Text Neon
Demo Image: Typography Text Neon

Typography Text Neon

Text design (typography) with neon effect.
Made by Prima Utama Apriansyah
March 6, 2014

Demo Image: Vertically Rotating Text
Demo Image: Vertically Rotating Text

Vertically Rotating Text

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

Demo image: CSS Attempts at Text with Inline Skewed Background

Author

  • Mark Stickling

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.

Demo image: Moving Cloud Text

Author

  • Cameron Fitzwilliam

Made with

  • HTML / CSS

About the code

Moving Cloud Text

Moving cloud text with HTML and CSS.

Demo image: Gooey Text Background With SVG Filters

Author

  • Ines Montani

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.

Demo image: Text With Video Background

Author

  • Daniel Yuschick

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.

Demo image: Text Background

Author

  • Stephanie

Made with

  • HTML
  • CSS/SCSS

About the code

Text Background

Text background clipping.

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

SVG Text: Animated Typing

HTML, CSS and SVG animated typing.
Made by Tiffany Rayside
February 12, 2015

back to top