30+ CSS 3D Text Effects

Are you seeking to give text elements the appearance of depth and dimension? Your quest ends here! In this curated compilation, we’re demonstrating 30+ HTML and CSS 3D text effect code examples that add a three-dimensional space look to your typography.

We’ve sourced these text 3D effects from various sublime platforms like GitHub and Codepen, adding depth and realism to simple text and making your text stand out. We’ve carefully selected each item in our free 3D text effect collection to add a futuristic flair that enhances the visual appeal and improves brand identity.

Whether you’re a professional UI developer, web designer, frontend developer, or marketer, we offer a diverse range of CSS 3D text effects that instantly capture your audience’s attention and simultaneously enhance aesthetics and the user experience. Discover our top CSS 3D text effects and make your design innovative.

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