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

  1. JavaScript Text Effects
Demo image: Single div CSS Cube

Author

  • Lynn Fisher

Made with

  • HTML / CSS (Stylus)

About a code

Single div CSS Cube

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

Responsive: no

Dependencies: -

Demo image: Sliced Text Effect

Author

  • Shireen Taj

Made with

  • HTML / CSS

About a code

Sliced Text Effect

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

Responsive: yes

Dependencies: -

Author

  • Robb Owen

Made with

  • HTML / CSS / JS

About a code

CSS-Only Text Shader

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

Responsive: yes

Dependencies: -

Demo image: Lightning Text Skew Idea

Author

  • Tom Hermans

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

Author

  • G'Mariem

Made with

  • HTML / CSS

About a code

3D Paper Text

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

Responsive: no

Dependencies: -

Demo image: A.

Author

  • Dan Wilson

Made with

  • HTML / CSS

About a code

A.

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

Responsive: yes

Dependencies: -

Demo image: Word Underline with CSS & clip-path

Author

  • Jhey

Made with

  • HTML / CSS

About a code

Word Underline with CSS & clip-path

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

Responsive: yes

Dependencies: -

Demo image: font-palette

Author

  • Ollie Williams

Made with

  • HTML / CSS

About a code

font-palette

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

Responsive: no

Dependencies: -

Author

  • Dusko Stamenic

Made with

  • HTML / CSS

About a code

Variable Fonts Hover Effect

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

Responsive: no

Dependencies: -

Demo image: background-image for Text

Author

  • Nils Binder

Made with

  • HTML / CSS (SCSS)

About a code

background-image for Text

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

Responsive: yes

Dependencies: -

Demo image: Pseudo Element for Fancy text-decoration

Author

  • Nils Binder

Made with

  • HTML / CSS (SCSS)

About a code

Pseudo Element for Fancy text-decoration

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

Responsive: yes

Dependencies: -

Author

  • Noah Raskin

Made with

  • HTML / CSS

About a code

Simple Unexpected Hover Effect

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

Responsive: no

Dependencies: -

Demo image: Reflections with CSS

Author

  • Preethi Sam

Made with

  • HTML / CSS

About a code

Reflections with CSS

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

Responsive: yes

Dependencies: -

Author

  • NANOUU

Made with

  • HTML / CSS

About a code

Highlight Text

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

Responsive: no

Dependencies: -

Author

  • S. Shahriar

Made with

  • HTML / CSS

About a code

CSS Stretchy Heading

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

Responsive: yes

Dependencies: -

Demo image: Sweet Stuff

Author

  • Mireille Tijdeman

Made with

  • HTML / CSS (SCSS)

About a code

Sweet Stuff

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

Responsive: yes

Dependencies: -

Demo image: Butter

Author

  • NANOUU

Made with

  • HTML / CSS

About a code

Butter

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

Responsive: no

Dependencies: -

Demo image: Knockout Text

Author

  • Krisztina Kovari

Made with

  • HTML / CSS

About a code

Knockout Text

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

Responsive: no

Dependencies: -

Demo image: Text Shadow

Author

  • Richard Stanley

Made with

  • HTML / CSS

About a code

Text Shadow

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

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Text-Shadow

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

Responsive: no

Dependencies: -

Demo image: Text Shadow

Author

  • lChap701

Made with

  • HTML / CSS

About a code

Text Shadow

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

Responsive: no

Dependencies: -

Demo image: Pure CSS Animated 3D Text Effect and Fade In As Outline Text Effect

Author

  • rohzart

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

Demo image: CSS Paper Cut-out Effect

Author

  • Smashing Magazine

Made with

  • HTML / CSS (SCSS)

About a code

CSS Paper Cut-out Effect

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

Responsive: yes

Dependencies: -

Author

  • Kai

Made with

  • HTML / CSS (SCSS)

About a code

Lightness

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

Responsive: no

Dependencies: -

Author

  • Ryan Mulligan

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

Demo image: Overlapping & Hollowed Text

Author

  • wheatup

Made with

  • HTML / CSS (SCSS)

About a code

Overlapping & Hollowed Text

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

Responsive: yes

Dependencies: -

Demo image: Gradient Stroke

Author

  • Marco Biedermann

Made with

  • HTML / CSS (PostCSS)

About a code

Gradient Stroke

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

Responsive: yes

Dependencies: -

Demo image: Metallic Bordered Text with CSS

Author

  • Shireen Taj

Made with

  • HTML / CSS

About a code

Metallic Bordered Text with CSS

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

Responsive: yes

Dependencies: -

Demo image: Multi Colored Text with CSS

Author

  • Shireen Taj

Made with

  • HTML / CSS

About a code

Multi Colored Text with CSS

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

Responsive: yes

Dependencies: -

Demo image: Gradient Text and ::selection Customization

Author

  • Stephanie Eckles

Made with

  • HTML / CSS (SCSS)

About a code

Gradient Text and ::selection Customization

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

Responsive: yes

Dependencies: -

Author

  • Patrick Freedom Mayer

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

Author

  • Philip Zastrow

Made with

  • HTML / CSS (SCSS)

About a code

Bold Hover Transition!

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

Responsive: yes

Dependencies: -

Demo image: Retro Text Effect

Author

  • Yoav Kadosh

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

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

Mapping Mouse Position in CSS

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

Responsive: no

Dependencies: -

Demo image: Colored Text with CSS Masks

Author

  • yoksel

Made with

  • HTML / CSS

About a code

Colored Text with CSS Masks

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

Responsive: yes

Dependencies: -

Demo image: CSS text-emphasis

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

CSS text-emphasis

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

Responsive: yes

Dependencies: -

Demo image: CSS+SVG Motion Blur Text Effect

Author

  • Florian Schulz

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

Author

  • Pratham

Made with

  • HTML / CSS

About a code

Multilayer Text

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

Responsive: no

Dependencies: -

Demo image: CSS Sticker

Author

  • Stephanie Eckles

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

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

CSS Fixed Conic Fill

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Gradient Text

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

CSS Gradient Text

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

Responsive: yes

Dependencies: -

Demo image: Drop Capital - ::first-letter

Author

  • Vaibhav Sharma

Made with

  • HTML / CSS

About a code

Drop Capital - ::first-letter

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

Responsive: yes

Dependencies: -

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

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

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

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

Demo image: FeTurbulence, feColorMatrix, feDisplacementMap

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

FeTurbulence, feColorMatrix, feDisplacementMap

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

Responsive: yes

Dependencies: -

Author

  • Shaw

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

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

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

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

Author

  • Raymond Lopez

Made with

  • HTML / CSS

About a code

Dual Color Text Scroll Effect

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

Responsive: no

Dependencies: -

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.

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.

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

Author

  • Stephanie

Made with

  • HTML
  • CSS/SCSS

About the code

Text Background

Text background clipping.

Demo image: Stripy Rainbow Text Effect

Author

  • Mandy Michael

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

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

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

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: 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: -background-clip:text CSS effect

Author

  • Jintos

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

Demo image: Milky Font Effect

Author

  • Jorge Epuñan

Made with

  • HTML (Pug) / CSS

About a code

Milky Font Effect

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

Responsive: no

Dependencies: -