Welcome to our site. If you are seeking the latest collection of CSS 3D text effects developed with HTML and CSS, you are in the right place. These collections were gathered from CodePen, Github, and other reputable platforms. Web developers and designers can easily incorporate these snippets into their web projects to elevate visual appeal, add charm, and bring dynamism to their designs.
CSS 3D text effects create the illusion of three-dimensional (3D) perspective, show depth, and add visual appeal to the text elements within a web page using varied CSS techniques. It also manipulates text elements and adds transitions, gradients, and animation effects. These 3D text effects provide incredible and dynamic features for your webpage portfolio or a creative blog by enhancing its appeal and attracting your valuable users.
Don’t worry! If you’re a beginner or a novice, these resources make it easy for you to effortlessly create captivating and imaginative 3D design styles for dull text content. Implementing these techniques can enhance your website’s design and visual appeal seamlessly.
Let’s embark on the journey to explore the curated collection of 3D text effects and take the design level of your projects to the next level.
01. 3D Decorator Pattern Extruded Text with SCSS CSS
See the Pen
threeD decorator pattern extruded text with SCSS CSS by JWYL (@jwyl)
on CodePen.
Author: JWYL @jwyl
Links: Source Code / Demo
Created on: December 07, 2017
Made with: HTML, CSS, SCSS
02. 3D Text Using CSS3
See the Pen
3D text using CSS3 by Vivin Antony (@vivinantony)
on CodePen.
Author: Vivin Antony @vivinantony
Links: Source Code / Demo
Created on: March 20, 2015
Made with: HTML, CSS, JS
03. Only CSS: Text Wave
See the Pen
Only CSS: Text Wave by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Author: Yusuke Nakaya @YusukeNakaya
Links: Source Code / Demo
Created on: December 04, 2017
Made with: HTML(Pug), CSS, SCSS
04. CSS only 3D Engraved Stone
See the Pen
CSS only 3D engraved stone by Michael Burridge (@mburridge)
on CodePen.
Author: Michael Burridge @mburridge
Links: Source Code / Demo
Created on: May 28, 2019
Made with: HTML, CSS, JS
05. Skewed and Rotated Text
See the Pen
Skewed and Rotated Text by Paul Grant (@cssinate)
on CodePen.
Author: Paul Grant @cssinate
Links: Source Code / Demo
Created on: April 05, 2018
Made with: HTML, CSS, SCSS
06. 3D Text Effect in CSS
See the Pen
3D Text Effect in CSS by Ryan (@ryandsouza13)
on CodePen.
Author: Ryan @ryandsouza13
Links: Source Code / Demo
Created on: May 28, 2018
Made with: HTML, CSS
07. “HEY” – CSS 3D Text Animation
See the Pen
“HEY” – CSS 3D Text Animation [ANIMATION] by Radu Bratan (@RaduBratan)
on CodePen.
Author: Radu Bratan @RaduBratan
Links: Source Code / Demo
Created on: June 13, 2020
Made with: HTML, CSS, SCSS
08. Text-Shadow Animate
See the Pen
Text-Shadow Animate by Wyatt Nolen (@wyattnolen)
on CodePen.
Author: Wyatt Nolen @wyattnolen
Links: Source Code / Demo
Created on: June 10, 2017
Made with: HTML, CSS, SCSS
09. CSS – 3D Text Effect
See the Pen
CSS – 3D text effect by k marchand (@kewinMarchand)
on CodePen.
Author: k marchand
Links: Source Code / Demo
Created on: April 22, 2018
Made with: HTML, CSS
10. 3D Text Effect Using Flip Transition
See the Pen
CSS3 + JS Text flip transition by Nicolas Fléron (@tempo22)
on CodePen.
Author: Nicolas Fléron @tempo22
Links: Source Code / Demo
Created on: August 30, 2013
Made with: HTML, CSS, JS
11. CSS Text Flip Animation
See the Pen
CSS Text Flip animation for TemplateFlip by Kanishk Kunal (@kanishkkunal)
on CodePen.
Author: Kanishk Kunal @kanishkkunal
Links: Source Code / Demo
Created on: February 07, 2017
Made with: HTML, CSS, SCSS
12. Cool 3D Text with Hover State in just CSS
See the Pen
Cool 3D Text with hover state in just CSS by Ashish Anand (@anotherwebguy)
on CodePen.
Author: Ashish Anand @anotherwebguy
Links: Source Code / Demo
Created on: October 01, 2018
Made with: HTML, CSS
13. SCCS 3D Text Mixin
See the Pen
Scss 3D Text Mixin by Hugo Darby-Brown (@hugo)
on CodePen.
Author: Hugo Darby-Brown @hugo
Links: Source Code / Demo
Created on: April 14, 2013
Made with: HTML, CSS, SCSS
14. Peeled Text Transforms
See the Pen
Peeled Text Transforms by Zoë Bijl (@Moiety)
on CodePen.
Author: Zoë Bijl @Moiety
Links: Source Code / Demo
Created on: November 23, 2014
Made with: HTML, CSS (stylus)
15. 3D Text Lighting & Shadows
See the Pen
3D Text Lighting & Shadows by Jérôme Van Overbeke (@jeromevanoverbeke)
on CodePen.
Author: Jérôme Van Overbeke @jeromevanoverbeke
Links: Source Code / Demo
Created on: February 26, 2014
Made with: HTML, CSS
16. Playing Around with Text Animation
See the Pen
Playing around with text animation by Shaun Greiner (@ShaunGreiner)
on CodePen.
Author: Shaun Greiner @ShaunGreiner
Links: Source Code / Demo
Created on: March 4, 2017
Made with: HTML, CSS , JS
17. 3D Text Flip Effect
See the Pen
3D Text Flip effect by w3tweaks (@w3tweaks)
on CodePen.
Author: w3tweaks @w3tweaks
Links: Source Code / Demo
Created on: November 07, 2022
Made with: HTML, CSS, JS
18. SCSS 3D Text Mixin
See the Pen
SCSS 3D text mixin by Liam Egan (@shubniggurath)
on CodePen.
Author: Liam Egan @shubniggurath
Links: Source Code / Demo
Created on: September 24, 2018
Made with: HTML, CSS, SCSS
19. 3d Text Marquee Effects
See the Pen
3d text marquee effects by Comehope (@comehope)
on CodePen.
Author: Comehope @comehope
Links: Source Code / Demo
Created on: April 29, 2018
Made with: HTML, CSS
20. Single Element, Multi Coloured 3d Text Effect
See the Pen
Single element, multi coloured 3d text effect by Mandy Michael (@mandymichael)
on CodePen.
Author: Mandy Michael @mandymichael
Links: Source Code / Demo
Created on: March 16, 2017
Made with: HTML, CSS
21. Lines and Layered CSS Text Effects
See the Pen
Lines and layered css text effects by Mandy Michael (@mandymichael)
on CodePen.
Author: Mandy Michael @mandymichael
Links: Source Code / Demo
Created on: March 11, 2017
Made with: HTML, CSS, SCSS
22. 3D Text
See the Pen
3D Text by Johan Fagerbeg (@birjolaxew)
on CodePen.
Author: Johan Fagerbeg @birjolaxew
Links: Source Code / Demo
Created on: November 06, 2013
Made with: HTML, CSS, SCSS
23. Onion 3D text
See the Pen
Onion 3D text by Fabio Ottaviani (@supah)
on CodePen.
Author: Fabio Ottaviani @supah
Links: Source Code / Demo
Created on: June 14, 2017
Made with: HTML, CSS, SCSS, JS
24. 3D Text Effects
See the Pen
3D Text by Chandra Shekhar (@chandrashekhar)
on CodePen.
Author: Chandra Shekhar @chandrashekhar
Links: Source Code / Demo
Created on: January 30, 2018
Made with: HTML, CSS, SCSS, JS
25. Shaded Text
See the Pen
Shaded Text by Rafael González (@rgg)
on CodePen.
Author: Rafael González @rgg
Links: Source Code / Demo
Created on: September 16, 2016
Made with: HTML, CSS, SCSS
26. Layered Fonts
See the Pen
Layered fonts in css using Rig Shaded by Jamie Clarke by Mandy Michael (@mandymichael)
on CodePen.
Author: Mandy Michael @mandymichael
Links: Source Code / Demo
Created on: April 29, 2017
Made with: HTML, CSS, SCSS, JS