102+ CSS Text Effects

A collection of free 102+ HTML and CSS text effect code examples for web designers and UI/UX creatives.

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