30+ CSS 3D Text Effects

Collection of 30+ CSS 3D Text effects. All items are carefully selected from GitHub and Codepen and 100% free and customizable.

1. CSS – 3D text effect

See the Pen <a href="https://codepen.io/kewinMarchand/pen/OZyxEr"> CSS – 3D text effect</a> by k marchand (<a href="https://codepen.io/kewinMarchand">@kewinMarchand</a>) on <a href="https://codepen.io">CodePen</a>. Author: k marchand
Source: Code / Demo
Created on: APRIL 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. Single Element, Multi Coloured 3d Text Effect

See the Pen <a href="https://codepen.io/mandymichael/pen/VprZaq"> Multi-coloured CSS Text Effect with Text Shadows</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

3. 3D Text Effect in CSS

See the Pen <a href="https://codepen.io/ryandsouza13/pen/yEBJQV"> 3D Text Effect in CSS</a> by Ryan (<a href="https://codepen.io/ryandsouza13">@ryandsouza13</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan
Source: Code / Demo
Created on: MAY 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. CSS 3D Text Effect

See the Pen <a href="https://codepen.io/kylewetton/pen/yLBwdJX"> CSS 3D Text Effect</a> by Kyle Wetton (<a href="https://codepen.io/kylewetton">@kylewetton</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kyle Wetton
Source: Code / Demo
Created on: SEPTEMBER 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. 3D Text Flip Effect

See the Pen <a href="https://codepen.io/w3tweaks/pen/eYKBJXq"> 3D Text Flip effect</a> by w3tweaks (<a href="https://codepen.io/w3tweaks">@w3tweaks</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: w3tweaks
Source: Code / Demo
Created on: NOVEMBER 07, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. 3D Text Effects

See the Pen <a href="https://codepen.io/chandrashekhar/pen/gvONee"> 3D Text</a> by Chandra Shekhar (<a href="https://codepen.io/chandrashekhar">@chandrashekhar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chandra Shekhar
Source: Code / Demo
Created on: JANUARY 30, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

7. 3D Text

See the Pen <a href="https://codepen.io/birjolaxew/pen/ALJpdx"> 3D Text</a> by Johan Fagerbeg (<a href="https://codepen.io/birjolaxew">@birjolaxew</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Johan Fagerbeg
Source: Code / Demo
Created on: NOVEMBER 06, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. 3D Decorator Pattern Extruded Text with SCSS CSS

See the Pen <a href="https://codepen.io/jwyl/pen/mqZeyw"> threeD decorator pattern extruded text with SCSS CSS</a> by JWYL (<a href="https://codepen.io/jwyl">@jwyl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JWYL
Source: Code / Demo
Created on: DECEMBER 07, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. 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, CSS(SCSS)

10. SCSS 3D Text Mixin

See the Pen <a href="https://codepen.io/shubniggurath/pen/OoYQBJ"> SCSS 3D text mixin</a> by Liam Egan (<a href="https://codepen.io/shubniggurath">@shubniggurath</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Liam Egan
Source: Code / Demo
Created on: SEPTEMBER 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. “HEY” – CSS 3D Text Animation

See the Pen <a href="https://codepen.io/RaduBratan/pen/vYLKNYO"> “HEY” – CSS 3D Text Animation [ANIMATION]</a> by Radu Bratan (<a href="https://codepen.io/RaduBratan">@RaduBratan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Radu Bratan
Source: Code / Demo
Created on: JUNE 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Playing Around with Text Animation

See the Pen <a href="https://codepen.io/ShaunGreiner/pen/wJWPdq"> Playing around with text animation</a> by Shaun Greiner (<a href="https://codepen.io/ShaunGreiner">@ShaunGreiner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shaun Greiner
Source: Code / Demo
Created on: MARCH 4, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. 3D Text Using CSS3

See the Pen <a href="https://codepen.io/vivinantony/pen/GgPEqz"> 3D text using CSS3</a> by Vivin Antony (<a href="https://codepen.io/vivinantony">@vivinantony</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vivin Antony
Source: Code / Demo
Created on: MARCH 20, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. 3d Text Marquee Effects

See the Pen <a href="https://codepen.io/comehope/pen/GdrrZq"> 3d text marquee effects</a> by Comehope (<a href="https://codepen.io/comehope">@comehope</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Comehope
Source: Code / Demo
Created on: APRIL 29, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. 3D Text Effect Using Flip Transition

See the Pen <a href="https://codepen.io/tempo22/pen/DBJxyd"> CSS3 + JS Text flip transition</a> by Nicolas Fléron (<a href="https://codepen.io/tempo22">@tempo22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicolas Fléron
Source: Code / Demo
Created on: AUGUST 30, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Text-Shadow Animate

See the Pen <a href="https://codepen.io/wyattnolen/pen/zzrbjb"> Text-Shadow Animate</a> by Wyatt Nolen (<a href="https://codepen.io/wyattnolen">@wyattnolen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wyatt Nolen
Source: Code / Demo
Created on: JUNE 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. 3D Text Lighting & Shadows

See the Pen <a href="https://codepen.io/jeromevanoverbeke/pen/zYRZmz"> 3D Text Lighting & Shadows</a> by Jérôme Van Overbeke (<a href="https://codepen.io/jeromevanoverbeke">@jeromevanoverbeke</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jérôme Van Overbeke
Source: Code / Demo
Created on: FEBRUARY 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. CSS only 3D Engraved Stone

See the Pen <a href="https://codepen.io/mburridge/pen/VOBWyQ"> CSS only 3D engraved stone</a> by Michael Burridge (<a href="https://codepen.io/mburridge">@mburridge</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Burridge
Source: Code / Demo
Created on: MAY 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

19. 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)

20. CSS Text Flip Animation

See the Pen <a href="https://codepen.io/kanishkkunal/pen/wgEBgX"> CSS Text Flip animation for TemplateFlip</a> by Kanishk Kunal (<a href="https://codepen.io/kanishkkunal">@kanishkkunal</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kanishk Kunal
Source: Code / Demo
Created on: FEBRUARY 07, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. 3D Text Animation & Sporadic Lines _

See the Pen <a href="https://codepen.io/Jeremboo/pen/BmxOyB"> _ 3D Text Animation & Sporadic Lines _</a> by Jeremie Boulay (<a href="https://codepen.io/Jeremboo">@Jeremboo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jeremie Boulay
Source: Code / Demo
Created on: NOVEMBER 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus), JavaScript(Babel)

22. Layered Fonts

See the Pen <a href="https://codepen.io/mandymichael/pen/bWqyMN"> Layered fonts in css using Rig Shaded by Jamie Clarke</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 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

23. 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 01, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. 3d Text effect – mousemove

See the Pen <a href="https://codepen.io/dennisgarrn/pen/nbrVoj"> 3d Text effect – mousemove</a> by Dennis Garrn (<a href="https://codepen.io/dennisgarrn">@dennisgarrn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dennis Garrn
Source: Code / Demo
Created on: JULY 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

25. Skewed and Rotated Text

See the Pen <a href="https://codepen.io/cssinate/pen/jzeEdq"> Skewed and Rotated Text</a> by Paul Grant (<a href="https://codepen.io/cssinate">@cssinate</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paul Grant
Source: Code / Demo
Created on: APRIL 05, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. 3D-Text with Text-Shadow

See the Pen <a href="https://codepen.io/zitrusfrisch/pen/kBNEag"> 3D-Text with Text-Shadow</a> by Daniel Riemer (<a href="https://codepen.io/zitrusfrisch">@zitrusfrisch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Riemer
Source: Code / Demo
Created on: DECEMBER 29, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. SCCS 3D Text Mixin

See the Pen <a href="https://codepen.io/hugo/pen/kNRLdY"> Scss 3D Text Mixin</a> by Hugo Darby-Brown (<a href="https://codepen.io/hugo">@hugo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hugo Darby-Brown
Source: Code / Demo
Created on: APRIL 14, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Only CSS: Text Wave

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/EbMWgd"> Only CSS: Text Wave</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: DECEMBER 04, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

29. 3D Text Effect

See the Pen <a href="https://codepen.io/nw/pen/WNKxRr"> 3D Text Effect</a> by Nate Watson (<a href="https://codepen.io/nw">@nw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nate Watson
Source: Code / Demo
Created on: AUGUST 27, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

30. 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)

31. Onion 3D text

See the Pen <a href="https://codepen.io/supah/pen/EXgXoE"> Onion 3D text</a> by Fabio Ottaviani (<a href="https://codepen.io/supah">@supah</a>) on <a href="https://codepen.io">CodePen</a>. Author: Fabio Ottaviani
Source: Code / Demo
Created on: JUNE 14, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript