102+ CSS Text Effects

Let’s say you’ve landed on a website with simple, emotionless text. Will it grab your attention? Most probably, you’ll say no. In this collection, we’re featuring 102+ HTML and CSS text effects examples. Our compilation offers visually appealing text effects that enhance text appearance, making it more engaging or decorative.

We’ve collected these text effects from popular platforms like GitHub and Codepen. Each text effect is carefully selected for web designers and UI/UX creatives, making it suitable for any web project and keeping your web page ahead in design trends. Our compilation offers a variety of options, ranging from mystique to flickering text effects and from layered lines to stripy rainbow text effects.

With these stunning text-effect designs, create eye-catching websites that attract your audience. So, let’s explore these 100% free CSS text effects.

1. Text Effect – Mystique

See the Pen <a href="https://codepen.io/jhnsnc/pen/Egyjbo"> Text Effect – Mystique</a> by Chris Johnson (<a href="https://codepen.io/jhnsnc">@jhnsnc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Johnson
Source: Code / Demo
Created on: SEPTEMBER 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

2. CSS Flickering Light Text Effect

See the Pen <a href="https://codepen.io/mandymichael/pen/aJLYVz"> CSS Flickering Light Text Effect</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: MARCH 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

3. Page layout text effects with clip-path

See the Pen <a href="https://codepen.io/mandymichael/pen/KmwvVb"> Page layout text effects with clip-path</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: APRIL 14, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

4. Lines and layered css text effects

See the Pen <a href="https://codepen.io/mandymichael/pen/vxmKpz"> Lines and layered css text effects </a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: MARCH 11, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

5. More cascading text effects w/ Scrolling + ScrollOut

See the Pen <a href="https://codepen.io/jh3y/pen/LXExbX"> More cascading text effects w/ Scrolling + ScrollOut 👊😎</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: NOVEMBER 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript(Babel)

6. Stripy Rainbow Text Effect

See the Pen <a href="https://codepen.io/mandymichael/pen/WpjMpJ"> Stripy Rainbow Text Effect</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: MARCH 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Cascading text effects w/ Splitting + ScrollOut ✍️🤓

See the Pen <a href="https://codepen.io/jh3y/pen/vzqVWa"> Cascading text effects w/ Splitting + ScrollOut ✍️🤓</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: SEPTEMBER 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript(Babel)

8. Gold CSS Text Effect with Gradients

See the Pen <a href="https://codepen.io/mandymichael/pen/xpLNeV"> Gold CSS Text Effect with Gradients</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: JANUARY 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. Cascading CSS Text Effects

See the Pen <a href="https://codepen.io/jh3y/pen/gOeGmRN"> ✨ Cascading CSS Text Effects ✨</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: JULY 27, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

10. CSS & HTML only Animated Ice Text Effect, Frozen Text Effect

See the Pen <a href="https://codepen.io/mandymichael/pen/wpYQKx"> CSS & HTML only Animated Ice Text Effect, Frozen Text Effect</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: JANUARY 17, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

11. Cascading text effects

See the Pen <a href="https://codepen.io/jh3y/pen/wJMPYQ"> Cascading text effects 📶✍️🤓</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: MARCH 2, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript(Babel)

12. Neon Light Text

See the Pen <a href="https://codepen.io/fossheim/pen/PoqKoLY"> Neon light text</a> by Sarah Fossheim (<a href="https://codepen.io/fossheim">@fossheim</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah Fossheim
Source: Code / Demo
Created on: MARCH 3, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. CSS: Text With Image Fill

See the Pen <a href="https://codepen.io/foxbeefly/pen/QRMGwg"> CSS: Text with image fill</a> by David Fox (<a href="https://codepen.io/foxbeefly">@foxbeefly</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Fox
Source: Code / Demo
Created on: MAY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Texts

See the Pen <a href="https://codepen.io/Dorota/pen/XWmeVry"> Texts</a> by Dorota S. (<a href="https://codepen.io/Dorota">@Dorota</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dorota S.
Source: Code / Demo
Created on: MAY 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Skew Text On Hover

See the Pen <a href="https://codepen.io/delpher/pen/rrLWEq"> Skew text on hover</a> by delpher (<a href="https://codepen.io/delpher">@delpher</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: delpher
Source: Code / Demo
Created on: JULY 17, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Sliding Perspective

See the Pen <a href="https://codepen.io/AdamDipinto/pen/EqxaEO"> Sliding Perspective</a> by Adam Dipinto (<a href="https://codepen.io/AdamDipinto">@AdamDipinto</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Dipinto
Source: Code / Demo
Created on: JULY 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Text Effect

See the Pen <a href="https://codepen.io/danwilson/pen/oNEyYpg"> A.</a> by Dan Wilson (<a href="https://codepen.io/danwilson">@danwilson</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dan Wilson
Source: Code / Demo
Created on: JUNE 3, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Efek Typography Text Neon

See the Pen <a href="https://codepen.io/primaapriansyah/pen/ExxGyj"> Efek Typography Text Neon part 1</a> by Prima Utama Apriansyah (<a href="https://codepen.io/primaapriansyah">@primaapriansyah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Prima Utama Apriansyah
Source: Code / Demo
Created on: MARCH 6, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Relieves En Textos

See the Pen <a href="https://codepen.io/davidlillo/pen/wZRagx"> Relieves en textos</a> by David Lillo (<a href="https://codepen.io/davidlillo">@davidlillo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Lillo
Source: Code / Demo
Created on: APRIL 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Popout Text

See the Pen <a href="https://codepen.io/nathantaylor/pen/wrBQWd"> popout text</a> by Nathan Taylor (<a href="https://codepen.io/nathantaylor">@nathantaylor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nathan Taylor
Source: Code / Demo
Created on: SEPTEMBER 14, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Only CSS: Text Slicer Gradient

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/boyOYm"> Only CSS: Text Slicer Gradient</a> by Yusuke Nakaya (<a href="https://codepen.io/YusukeNakaya">@YusukeNakaya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yusuke Nakaya
Source: Code / Demo
Created on: OCTOBER 24, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

22. Variable Fonts Hover Effect

See the Pen <a href="https://codepen.io/enbee81/pen/WNdKLBY"> 9-Tipps: #9 background-image for Text</a> by Nils Binder (<a href="https://codepen.io/enbee81">@enbee81</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nils Binder
Source: Code / Demo
Created on: APRIL 12, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Typo Triple CSS Text Effect

See the Pen <a href="https://codepen.io/creatz/pen/pooBeev"> Typo triple</a> by creatz (<a href="https://codepen.io/creatz">@creatz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: creatz
Source: Code / Demo
Created on: NOVEMBER 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Text-shadow challenge

See the Pen <a href="https://codepen.io/t_afif/pen/dyzZEVP"> Text-shadow challenge</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: NOVEMBER 3, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Simple CSS Hover Effect Using Sass Loops

See the Pen <a href="https://codepen.io/FUGU22/pen/YxEojN"> Simple CSS Hover Effect using Sass Loops</a> by Charlie Marcotte (<a href="https://codepen.io/FUGU22">@FUGU22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charlie Marcotte
Source: Code / Demo
Created on: AUGUST 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

26. Styling Text with SVG (Second Shadow)

See the Pen <a href="https://codepen.io/team/codeschool/pen/BKrRwg"> Styling Text with SVG (Second Shadow)</a> by Code School (<a href="https://codepen.io/team/codeschool">@codeschool</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Code School
Source: Code / Demo
Created on: APRIL 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Amazing Interiors Font Effect

See the Pen <a href="https://codepen.io/scrabill/pen/qBdwEQr"> Amazing Interiors Font Effect</a> by Shannon Crabill (<a href="https://codepen.io/scrabill">@scrabill</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shannon Crabill
Source: Code / Demo
Created on: APRIL 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Outline Text Effect

See the Pen <a href="https://codepen.io/developerontour/pen/QWjMNLe"> Outline Text Effect</a> by Jamie Hammond (<a href="https://codepen.io/developerontour">@developerontour</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jamie Hammond
Source: Code / Demo
Created on: APRIL 29, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. CSS : Background Clip

See the Pen <a href="https://codepen.io/web3senior/pen/LXMwPb"> CSS : Background Clip</a> by Amir Rahimi (<a href="https://codepen.io/web3senior">@web3senior</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amir Rahimi
Source: Code / Demo
Created on: DECEMBER 1, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

30. Happy New Year! — CSS Only

See the Pen <a href="https://codepen.io/Sector22/pen/KwNpWr"> Happy New Year! — CSS Only </a> by SnailCrusher (<a href="https://codepen.io/Sector22">@Sector22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: SnailCrusher
Source: Code / Demo
Created on: DECEMBER 31, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

31. Strokes, Shadows + Halftone Effects

See the Pen <a href="https://codepen.io/markmead/pen/YjQKeZ"> Strokes, Shadows + Halftone Effects</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: JULY 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

32. Variable Fonts Hover Effect

See the Pen <a href="https://codepen.io/DuskoStamenic/pen/QWaoBPY"> Variable Fonts Hover Effect </a> by Dusko Stamenic (<a href="https://codepen.io/DuskoStamenic">@DuskoStamenic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dusko Stamenic
Source: Code / Demo
Created on: APRIL 21, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. Multi Line Truncation In Pure CSS

See the Pen <a href="https://codepen.io/soluml/pen/KOKGmB"> Multi-line-truncation in Pure CSS w/IE11 support (Exclusions)</a> by Benjamin Solum (<a href="https://codepen.io/soluml">@soluml</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Benjamin Solum
Source: Code / Demo
Created on: JULY 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Animated Blobs Text – Multiple Colors

See the Pen <a href="https://codepen.io/uzcho_/pen/LaPqWJ"> Animated Blobs Text – Multiple Colors</a> by Amli (<a href="https://codepen.io/uzcho_">@uzcho_</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amli
Source: Code / Demo
Created on: FEBRUARY 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. Underline Clip Hover Animation

See the Pen <a href="https://codepen.io/RickyMarou/pen/dyoMXYR"> Underline clip hover animation</a> by Marwan Zibaoui (<a href="https://codepen.io/RickyMarou">@RickyMarou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marwan Zibaoui
Source: Code / Demo
Created on: FEBRUARY 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

36. Animated Text-Shadow

See the Pen <a href="https://codepen.io/erinesullivan/pen/ZMreqJ"> Animated Text-Shadow</a> by Erin E. Sullivan (<a href="https://codepen.io/erinesullivan">@erinesullivan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Erin E. Sullivan
Source: Code / Demo
Created on: SEPTEMBER 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. Layered Text-shadow Effect CSS

See the Pen <a href="https://codepen.io/TajShireen/pen/abzmoRE"> Layered text-shadow effect CSS</a> by Shireen Taj (<a href="https://codepen.io/TajShireen">@TajShireen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shireen Taj
Source: Code / Demo
Created on: DECEMBER 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. CSS-Only text shader

See the Pen <a href="https://codepen.io/robb0wen/pen/KKoVOrq"> CSS-Only text shader</a> by Robb Owen (<a href="https://codepen.io/robb0wen">@robb0wen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robb Owen
Source: Code / Demo
Created on: JULY 7, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

39. Text Effect With CSS

See the Pen <a href="https://codepen.io/master_vikash/pen/jOEZNZN"> Text Effect with CSS</a> by Vikash Singh (<a href="https://codepen.io/master_vikash">@master_vikash</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vikash Singh
Source: Code / Demo
Created on: JANUARY 7, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. SVG/Stroke Animation.

See the Pen <a href="https://codepen.io/Mansoour/pen/jvyZOr"> SVG/Stroke Animation.</a> by Mansoour (<a href="https://codepen.io/Mansoour">@Mansoour</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mansoour
Source: Code / Demo
Created on: AUGUST 31, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

41. CSS In CSS With A Lot Of C And S

See the Pen <a href="https://codepen.io/giuliacardieri/pen/XWmrLKb"> CSS in CSS with a lot of C and S</a> by Giulia Cardieri (<a href="https://codepen.io/giuliacardieri">@giuliacardieri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Giulia Cardieri
Source: Code / Demo
Created on: APRIL 9, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

42. Spring Text Hover Effect

See the Pen <a href="https://codepen.io/nathantaylor/pen/veOGMo"> Spring Text Hover Effect</a> by Nathan Taylor (<a href="https://codepen.io/nathantaylor">@nathantaylor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nathan Taylor
Source: Code / Demo
Created on: SEPTEMBER 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

43. Background Clipping Covfefe

See the Pen <a href="https://codepen.io/ramenhog/pen/VboyrL"> Background clipping covfefe</a> by Stephanie (<a href="https://codepen.io/ramenhog">@ramenhog</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephanie
Source: Code / Demo
Created on: MAY 31, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

44. Text Glitch Effect

See the Pen <a href="https://codepen.io/mariiinda/pen/vYNqoNm"> Text Glitch Effect</a> by marinda (<a href="https://codepen.io/mariiinda">@mariiinda</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: marinda
Source: Code / Demo
Created on: MAY 29, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

45. DECONSTRUCTED

See the Pen <a href="https://codepen.io/finnhvman/pen/BGmygj"> DECONSTRUCTED</a> by Bence Szabo (<a href="https://codepen.io/finnhvman">@finnhvman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ben Szabo
Source: Code / Demo
Created on: NOVEMBER 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

46. Cool 3D Text With Hover State In Just CSS

See the Pen <a href="https://codepen.io/anotherwebguy/pen/zmGrrz"> Cool 3D Text with hover state in just CSS</a> by Ashish Anand (<a href="https://codepen.io/anotherwebguy">@anotherwebguy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ashish Anand
Source: Code / Demo
Created on: OCTOBER 1, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

47. SVG Text Underline

See the Pen <a href="https://codepen.io/iam_aspencer/pen/qvNPBv"> SVG Text Underline</a> by Andrew Spencer (<a href="https://codepen.io/iam_aspencer">@iam_aspencer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew Spencer
Source: Code / Demo
Created on: MARCH 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

48. CSS Gooey Text Transition

See the Pen <a href="https://codepen.io/mikegolus/pen/MBRKyB"> CSS Gooey Text Transition</a> by Mike Golus (<a href="https://codepen.io/mikegolus">@mikegolus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mike Golus
Source: Code / Demo
Created on: AUGUST 14, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML( Pug), CSS(Sass)

49. Letters Effect

See the Pen <a href="https://codepen.io/esse/pen/qxmqPQ"> letters effect</a> by stefano perelli (<a href="https://codepen.io/esse">@esse</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: stefano perelli
Source: Code / Demo
Created on: FEBRUARY 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

50. Scrambled CSS Text Effect

See the Pen <a href="https://codepen.io/timming-au/pen/mdVWmmB"> Scrambling Text Effect</a> by timming-au (<a href="https://codepen.io/timming-au">@timming-au</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: timming-au
Source: Code / Demo
Created on: JUNE 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

51. Squiggly Text

See the Pen <a href="https://codepen.io/lbebber/pen/KwGEQv"> Squiggly Text</a> by Lucas Bebber (<a href="https://codepen.io/lbebber">@lbebber</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lucas Bebber
Source: Code / Demo
Created on: MARCH 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

52. LOVE Text Effect

See the Pen <a href="https://codepen.io/wagerfield/pen/AxGbVz"> LOVE Text Effect</a> by Matthew Wagerfield (<a href="https://codepen.io/wagerfield">@wagerfield</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matthew Wagerfield
Source: Code / Demo
Created on: NOVEMBER 23, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass),JavaScript CoffeeScript

53. Custom Multiline Text Underline With Rounded Caps

See the Pen <a href="https://codepen.io/Ash/pen/WBMxpp"> Custom multiline text underline with rounded caps</a> by ash (<a href="https://codepen.io/Ash">@Ash</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ash
Source: Code / Demo
Created on: MAY 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

54. SVG Knockout Text With Video Background

See the Pen <a href="https://codepen.io/DanielYuschick/pen/BdYooL"> SVG Knockout Text with Video Background</a> by daynix (<a href="https://codepen.io/DanielYuschick">@DanielYuschick</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Yuschick
Source: Code / Demo
Created on: AUGUST 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

55. Vertically Rotating Text Css

See the Pen <a href="https://codepen.io/JacobStone/pen/Jjjpaa"> Vertically rotating text css [FORK] w/ browser prefixes</a> by Jacob Stone Design (<a href="https://codepen.io/JacobStone">@JacobStone</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jacob Stone Design
Source: Code / Demo
Created on: MARCH 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

56. Multiline Background Gradient With Mix-blend-mode

See the Pen <a href="https://codepen.io/matthiasott/pen/aQxBOB"> Multiline background gradient with mix-blend-mode</a> by Matthias Ott (<a href="https://codepen.io/matthiasott">@matthiasott</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matthias Ott
Source: Code / Demo
Created on: DECEMBER 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

57. Animating Striped Text With Background Clip And Gradients.

See the Pen <a href="https://codepen.io/mandymichael/pen/PaBraK"> Animating striped text with background clip and gradients.</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: JUNE 26, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

58. Font-palette demo

See the Pen <a href="https://codepen.io/cssgrid/pen/BaYKdeM"> font-palette demo</a> by Ollie Williams (<a href="https://codepen.io/cssgrid">@cssgrid</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ollie Williams
Source: Code / Demo
Created on: MAY 10, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

59. 3D Letters – Sugar Sweet

See the Pen <a href="https://codepen.io/havardob/pen/WNQwvze"> 3D letters – sugar sweet</a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: APRIL 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

60. Blip Text

See the Pen <a href="https://codepen.io/2Mogs/pen/gOpYwGd"> Blip text</a> by Nick Watton (<a href="https://codepen.io/2Mogs">@2Mogs</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nick Watton
Source: Code / Demo
Created on: FEBRUARY 4, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

61. Twenty Twenty & Multi-Color Gradients

See the Pen <a href="https://codepen.io/leenalavanya/pen/jOEGRLR"> Twenty Twenty & Multi-Color Gradients ❤</a> by Leena Lavanya (<a href="https://codepen.io/leenalavanya">@leenalavanya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Leena Lavanya
Source: Code / Demo
Created on: JANUARY 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

62. Writing Mode

See the Pen <a href="https://codepen.io/cssgrid/pen/OJVGNPr"> writing-mode</a> by Ollie Williams (<a href="https://codepen.io/cssgrid">@cssgrid</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CSS GRID
Source: Code / Demo
Created on: APRIL 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

63. SAVE!

See the Pen <a href="https://codepen.io/SebastianOpperman/pen/wVJwKe"> SAVE!</a> by Sebastian Opperman (<a href="https://codepen.io/SebastianOpperman">@SebastianOpperman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sebastian Opperman
Source: Code / Demo
Created on: JULY 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

64. Single div CSS cube

See the Pen <a href="https://codepen.io/lynnandtonic/pen/PoaYgMO"> Single div CSS cube</a> by Lynn Fisher (<a href="https://codepen.io/lynnandtonic">@lynnandtonic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lynn Fisher
Source: Code / Demo
Created on: OCTOBER 24, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

65. Text Effect

See the Pen <a href="https://codepen.io/N-Cristina/pen/OJMJxgo"> Text effect</a> by Cristina Niculescu (<a href="https://codepen.io/N-Cristina">@N-Cristina</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cristina Niculescu
Source: Code / Demo
Created on: JUNE 3, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

66. SVG Text: Animated Typing

See the Pen <a href="https://codepen.io/tmrDevelops/pen/yyprGq"> SVG Text: Animated Typing</a> by Tiffany Rayside (<a href="https://codepen.io/tmrDevelops">@tmrDevelops</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tiffany Rayside
Source: Code / Demo
Created on: FEBRUARY 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

67. GSAP Text Reveal Animation

See the Pen <a href="https://codepen.io/sedlukha/pen/eRoYMZ"> GSAP text reveal animation</a> by Artur Sedlukha (<a href="https://codepen.io/sedlukha">@sedlukha</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Artur Sedlukha
Source: Code / Demo
Created on: JULY 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

68. Reflections with CSS

See the Pen <a href="https://codepen.io/rpsthecoder/pen/rNYZWBr"> Reflections with CSS</a> by Preethi Sam (<a href="https://codepen.io/rpsthecoder">@rpsthecoder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Preethi Sam
Source: Code / Demo
Created on: FEBRUARY 26, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

69. 80s Fonts Text Effect 4: Cyberspace Text

See the Pen <a href="https://codepen.io/inegoita/pen/wLxObg"> 80s Fonts Text Effect 4: Cyberspace Text</a> by Ion Emil Negoita (<a href="https://codepen.io/inegoita">@inegoita</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ion Emil Negoita
Source: Code / Demo
Created on: JULY 5, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

70. Text In A Circle With CSS Variables

See the Pen <a href="https://codepen.io/michellebarker/pen/BEKWPx"> Text in a circle with CSS variables</a> by Michelle Barker (<a href="https://codepen.io/michellebarker">@michellebarker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michelle Barker
Source: Code / Demo
Created on: APRIL 5, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

71. Silent Movie Text Effect

See the Pen <a href="https://codepen.io/mimikos/pen/QMjjzy"> Silent Movie Text Effect</a> by Dimitra Vasilopoulou (<a href="https://codepen.io/mimikos">@mimikos</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dimitra Vasilopoulou
Source: Code / Demo
Created on: JULY 28, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

72. Onion Skinning Text Morphing

See the Pen <a href="https://codepen.io/jhealey5/pen/xrErrW"> Onion Skinning Text Morphing</a> by John Healey (<a href="https://codepen.io/jhealey5">@jhealey5</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: John Healey
Source: Code / Demo
Created on: JUNE 14, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

73. Highlight text

See the Pen <a href="https://codepen.io/antoniasymeonidou/pen/wvPvMve"> Highlight text!#2</a> by NANOUU (<a href="https://codepen.io/antoniasymeonidou">@antoniasymeonidou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: NANOUU
Source: Code / Demo
Created on: JANUARY 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

74. Animated Highlighted Text

See the Pen <a href="https://codepen.io/ariona/pen/LEEadb"> Animated highlighted text</a> by Rian Ariona (<a href="https://codepen.io/ariona">@ariona</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rian Ariona
Source: Code / Demo
Created on: NOVEMBER 22, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

75. Animated Underlines

See the Pen <a href="https://codepen.io/rthor/pen/xrmoWj"> Animated underlines</a> by Ragnar Þór Valgeirsson (<a href="https://codepen.io/rthor">@rthor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ragnar Þór Valgeirsson
Source: Code / Demo
Created on: JULY 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

76. Multiline Text Strikthrough

See the Pen <a href="https://codepen.io/mandymichael/pen/WBvqbP"> Multiline Text Strikthrough</a> by Mandy Michael (<a href="https://codepen.io/mandymichael">@mandymichael</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mandy Michael
Source: Code / Demo
Created on: MAY 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

77. CSS Stretchy Heading

See the Pen <a href="https://codepen.io/ShadowShahriar/pen/ZEXVLbB"> CSS Stretchy Heading 😄</a> by S. Shahriar (<a href="https://codepen.io/ShadowShahriar">@ShadowShahriar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: S. Shahriar
Source: Code / Demo
Created on: JANUARY 13, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

78. Megaman READY!

See the Pen <a href="https://codepen.io/notoriousb1t/pen/vroZox"> Megaman READY!</a> by Christopher Wallis (<a href="https://codepen.io/notoriousb1t">@notoriousb1t</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Christopher Wallis
Source: Code / Demo
Created on: JULY 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

79. Peeled Text Transforms

See the Pen <a href="https://codepen.io/Moiety/pen/OPPKMr"> Peeled Text Transforms</a> by Zoë Bijl (<a href="https://codepen.io/Moiety">@Moiety</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zoë Bijl
Source: Code / Demo
Created on: NOVEMBER 23, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

80. Popout Text With Background Image Shadow

See the Pen <a href="https://codepen.io/markmead/pen/xympyG"> Popout Text with Background Image Shadow</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: OCTOBER 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

81. Sweet stuff

See the Pen <a href="https://codepen.io/mireille1306/pen/BawdXzY"> Sweet stuff</a> by Mireille Tijdeman (<a href="https://codepen.io/mireille1306">@mireille1306</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mireille Tijdeman
Source: Code / Demo
Created on: DECEMBER 22, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

82. Hello!

See the Pen <a href="https://codepen.io/derossi_s/pen/vpWMzb"> Hello!</a> by Sebastian De Rossi (<a href="https://codepen.io/derossi_s">@derossi_s</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sebastian De Rossi
Source: Code / Demo
Created on: JANUARY 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

83. Lightning text skew idea

See the Pen <a href="https://codepen.io/tomhermans/pen/MWQZzdQ"> Lightning text skew idea</a> by Tom Hermans (<a href="https://codepen.io/tomhermans">@tomhermans</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tom Hermans
Source: Code / Demo
Created on: JUNE 14, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

84. Text Effect Using Background Clip And Clip Path

See the Pen <a href="https://codepen.io/TajShireen/pen/jOPyQrw"> Text effect using Background clip and clip path</a> by Shireen Taj (<a href="https://codepen.io/TajShireen">@TajShireen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shireen Taj
Source: Code / Demo
Created on: FEBRUARY 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

85. Split CSS Text Effect With Clip-Path

See the Pen <a href="https://codepen.io/havardob/pen/PoPaWaE"> Split text with clip-path | 300 followers ‘celebration’</a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: MAY 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

86. Text Line Animation

See the Pen <a href="https://codepen.io/jhealey5/pen/mBOvZR"> Text Line Animation</a> by John Healey (<a href="https://codepen.io/jhealey5">@jhealey5</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: John Healey
Source: Code / Demo
Created on: SEPTEMBER 25, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

87. Animated Underline Effect On Several Lines

See the Pen <a href="https://codepen.io/cecilehabran/pen/EvRamr"> Animated underline effect on several lines</a> by cecile (<a href="https://codepen.io/cecilehabran">@cecilehabran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: cecile
Source: Code / Demo
Created on: AUGUST 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

88. CSS Arcade Typography Snow Bros 1990

See the Pen <a href="https://codepen.io/lynnandtonic/pen/rNVNpmN"> CSS Arcade Typography: Snow Bros. (1990)</a> by Lynn Fisher (<a href="https://codepen.io/lynnandtonic">@lynnandtonic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lynn Fisher
Source: Code / Demo
Created on: FEBRUARY 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS( Stylus)

89. Happy Text

See the Pen <a href="https://codepen.io/bennettfeely/pen/AgbQRQ"> Happy Text</a> by Bennett Feely (<a href="https://codepen.io/bennettfeely">@bennettfeely</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bennett Feely
Source: Code / Demo
Created on: NOVEMBER 11, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

90. Multi Line Text Fat Underline Hover

See the Pen <a href="https://codepen.io/markmead/pen/wvwjePG"> Multi Line Text Underline on Hover</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: SEPTEMBER 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

91. 3D Paper Text

See the Pen <a href="https://codepen.io/G-Mariem/pen/gOvBjMP"> 3D Paper Text </a> by G’Mariem (<a href="https://codepen.io/G-Mariem">@G-Mariem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: G’Mariem
Source: Code / Demo
Created on: JUNE 9, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

92. Western Electric Big Button Phone

See the Pen <a href="https://codepen.io/alexgoff/pen/joBrOE"> Western Electric Big Button Phone</a> by Alex (<a href="https://codepen.io/alexgoff">@alexgoff</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex
Source: Code / Demo
Created on: MAY 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

93. Moving Cloud Text | HTML + CSS

See the Pen <a href="https://codepen.io/CameronFitzwilliam/pen/pamobO"> Moving Cloud Text | HTML + CSS</a> by Cameron Fitzwilliam (<a href="https://codepen.io/CameronFitzwilliam">@CameronFitzwilliam</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cameron Fitzwilliam
Source: Code / Demo
Created on: MARCH 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

94. Word Underline w/ CSS && clip-path

See the Pen <a href="https://codepen.io/jh3y/pen/mdXLjzG"> Word Underline w/ CSS && clip-path ✨</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: JUNE 2, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

95. Sliced Text Effect

See the Pen <a href="https://codepen.io/TajShireen/pen/ExLWgGb"> Sliced Text Effect</a> by Shireen Taj (<a href="https://codepen.io/TajShireen">@TajShireen</a>) on <a href="https://codepen.io">CodePen</a>. See the Pen <a href="https://codepen.io/TajShireen/pen/ExLWgGb"> Sliced Text Effect</a> by Shireen Taj (<a href="https://codepen.io/TajShireen">@TajShireen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shireen Taj
Source: Code / Demo
Created on: SEPTEMBER 16, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

96. Effect

See the Pen <a href="https://codepen.io/bhupinder-daroch/pen/PowyaxP"> effect</a> by Bhupinder Daroch (<a href="https://codepen.io/bhupinder-daroch">@bhupinder-daroch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bhupinder Daroch
Source: Code / Demo
Created on: JANUARY 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

97. SVG Text Animation

See the Pen <a href="https://codepen.io/cassie-codes/pen/GEaZVm"> SVG text animation</a> by Cassie Evans (<a href="https://codepen.io/cassie-codes">@cassie-codes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cassie Evans
Source: Code / Demo
Created on: JULY 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

98. Blazing Fire

See the Pen <a href="https://codepen.io/makan/pen/yyjRZx"> Blazing Fire</a> by Makan (<a href="https://codepen.io/makan">@makan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Makan
Source: Code / Demo
Created on: FEBRUARY 25, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

99. Shaded Text

See the Pen <a href="https://codepen.io/rgg/pen/ozLzbz"> Shaded Text</a> by Rafael González (<a href="https://codepen.io/rgg">@rgg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rafael González
Source: Code / Demo
Created on: SEPTEMBER 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

100. CSS Text Reveal

See the Pen <a href="https://codepen.io/andysanchez-dev/pen/GYPevV"> CSS Text Reveal</a> by Andrés Sánchez (<a href="https://codepen.io/andysanchez-dev">@andysanchez-dev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrés Sánchez
Source: Code / Demo
Created on: OCTOBER 26, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

101. Refracted Floating Text Effect

See the Pen <a href="https://codepen.io/GeorgePark/pen/wEQpmo"> Refracted Floating Text Effect</a> by George W. Park (<a href="https://codepen.io/GeorgePark">@GeorgePark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: George W. Park
Source: Code / Demo
Created on: SEPTEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

102. Stay Positive

See the Pen <a href="https://codepen.io/cobra_winfrey/pen/YBNMdw"> Stay Positive</a> by Adam Kuhn (<a href="https://codepen.io/cobra_winfrey">@cobra_winfrey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Kuhn
Source: Code / Demo
Created on: JANUARY 31, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

103. Butter

See the Pen <a href="https://codepen.io/antoniasymeonidou/pen/ZEXYaKg"> Butter</a> by NANOUU (<a href="https://codepen.io/antoniasymeonidou">@antoniasymeonidou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: NANOUU
Source: Code / Demo
Created on: DECEMBER 1, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS