This set of CSS 3D text effects includes several different styles, each with its own unique look. Use these effects on any web page to create an eye-catching design. Updated with 4 new demos on Nov 11, 2022.
In today’s world, web design has evolved from being just about aesthetics to becoming an integral part of business strategy. With the help of CSS 3D text effects, you can create stunning designs that will leave visitors speechless.
01 of 363D Text Effect in CSS

02 of 36Single-element, multi-colored 3d text effect

Author
- Mandy Michael
Made with
- HTML / SCSS / JS
Created on
- MARCH 16, 2017
Updated on
- JUNE 8, 2017
03 of 36Skewed and Rotated Text
04 of 363D Text Effects Animations
05 of 36Diagonal 3D Text Effects

Author
- Chandra Shekhar
Made with
- HTML / SCSS / JS
Created on
- JANUARY 30, 2018
Updated on
- DECEMBER 28, 2018
About the Code
In this demo, we have created diagonal 3D text effects using SCSS and JavaScript. This effect can be used to create interesting headers or logos for websites. We’ll be using a few lines of SCSS and some simple JavaScript code to create this effect.
Useful Links: More info | Live Demo
Dependency: font-awesome jquery
06 of 363d text effects on stairs using CSS3
Author
- k marchand
Made with
- HTML / CSS
Created on
- APRIL 22, 2018
Updated on
- APRIL 22, 2018
07 of 363D Text Effects CSS

Author
- Vivin Antony
Made with
- HTML / CSS / JS
Created on
- MARCH 20, 2015
Updated on
- FEBRUARY 6, 2017
About the Code
Three-dimensional text is always a great way to add depth and interest to your web designs, and it’s now easier than ever to create CSS 3d text-shadow. In this demo, we have created 3D CSS text effects using the CSS3 transform property.
Useful Links: More info | Live Demo
Dependency: –
08 of 36Lovely 3D text effect in CSS
09 of 363D Engraved Stone with CSS
10 of 363D Decorator Pattern Extruded Text with SCSS
Author
- JWYL
Made with
- HTML / SCSS
Created on
- DECEMBER 7, 2017
Updated on
- SEPTEMBER 8, 2021
About the Code
In this demo, we have created a 3D Decorator Pattern Extruded Text with SCSS. These CSS 3d Text effects can be achieved by using the CSS property of transform and some basic knowledge of Sass. With a little bit of creativity, you can create some amazing CSS 3d effects that will make your website stand out from the rest.
Useful Links: More info | Live Demo
Dependency: –
11 of 363D Text

Author
- Johan Fagerbeg
Made with
- HTML / SCSS
Created on
- NOVEMBER 5, 2013
Updated on
- MARCH 13, 2017
About the Code
In this quick demo, we have created a fun 3D text effect with animation using HTML and SCSS. This effect is easy to create and doesn’t require any images, making it ideal for anyone just getting started with web development. Let’s get started!
Useful Links: More info | Live Demo
Dependency: –
12 of 36Onion 3D text

Author
- Fabio Ottaviani
Made with
- HTML / SCSS / JS
Created on
- JUNE 14, 2017
Updated on
- JUNE 14, 2017
About the Code
3D text effect using HTML, SCSS, and JavaScript is a fun effect that can be used for various purposes such as website headers, hero sections, or even as part of a design portfolio. The onion CSS 3D text effects are created by taking advantage of the CSS transform property. This property allows us to rotate, scale, and translate elements in 3D space.
Useful Links: More info | Live Demo
Dependency: font
13 of 363D Text Effect using flip transition
Author
- tempo22
Made with
- HTML / SCSS / JS
Created on
- AUGUST 30, 2013
Updated on
- AUGUST 30, 2013
About the Code
awesome CSS3 3D text flip effect using only CSS, JavaScript, and HTML. Weirdly there are some problems with firefox and the back character animation.
Useful Links: More info | Live Demo
Dependency: –
14 of 363D Flipping Text
15 of 363D text flip effect using CSS and splitting.js
See the Pen 3D Text Flip effect by Vimalraj (@w3tweaks) on CodePen.
Author
- Vimalraj
Made with
- HTML / SCSS / JS
Created on
- NOVEMBER 7, 2022
Updated on
- NOVEMBER 7, 2022
About the Code
3D text flip effect using CSS and splitting.js. It’s a great way to add some extra flair to your website or blog.
Useful Links: More info | Live Demo
Dependency: splitting.css(v1.0.0) splitting.js(v1.0.0)
16 of 36Playing around with 3d text animation
See the Pen Playing around with text animation by Shaun Greiner (@ShaunGreiner) on CodePen.
Author
- Shaun Greiner
Made with
Created on
- MARCH 4, 2017
Updated on
- JUNE 3, 2021
17 of 36CSS Text Flip animation
See the Pen CSS Text Flip animation for TemplateFlip by Kanishk Kunal (@kanishkkunal) on CodePen.
Author
- Kanishk Kunal
Made with
- HTML / SCSS
Created on
- FEBRUARY 7, 2017
Updated on
- JULY 24, 2017
18 of 36Diagonal Text Flip Effect
See the Pen Diagonal Text Flip Effect by Michail Yasonik (@myasonik) on CodePen.
Author
- Michail Yasonik
Made with
- HTML / SCSS / JS
Created on
- NOVEMBER 10, 2014
Updated on
- NOVEMBER 10, 2014
About the Code
Create an awesome-looking text effect by flipping the text Diagonally.
Useful Links: More info | Live Demo
Dependency: jquery.js(v2.1.3)
19 of 36Text Parallax effect with shadow using ReactJs
20 of 363D Text Effect in CSS
21 of 363d text marquee effects
22 of 36Text Wave effect using only CSS
Author
- Yusuke Nakaya
Made with
- Pug / SCSS
Created on
- DECEMBER 4, 2017
Updated on
- OCTOBER 21, 2019
About the Code
Check out this amazing text wave effect that can be created using only CSS. You’ll be amazed at how easy it is to create this effect.
Useful Links: More info | Live Demo
Dependency: fonts.googleapis
23 of 363D CSS Typography – The Future of Web Design
See the Pen 3D CSS Typography by Noah Blon (@noahblon) on CodePen.
Author
- Author Name
Made with
- HTML / CSS
Created on
- July 1, 2014
Updated on
- JUNE 11, 2022
About the Code
3D CSS Typography uses HTML and CSS to create beautiful and realistic 3D text. This technology is the future of web design and will revolutionize the way we interact with websites.
Useful Links: More info | Live Demo
Dependency: –
Disclaimer: Renders best in Chrome. This technique does work in Firefox, but text stroke is not supported.
24 of 36Layered fonts for text in CSS using Rig Shaded
See the Pen Layered fonts in css using Rig Shaded by Jamie Clarke by Mandy Michael (@mandymichael) on CodePen.
Author
- Mandy Michael
Made with
- HTML / SCSS / JS
Created on
- APRIL 29, 2017
Updated on
- JANUARY 19, 2018
25 of 36Paper Folding Text Effect with CSS

Author
- Mandy Michael
Made with
- HTML / SCSS / JS
Created on
- FEBRUARY 25, 2017
Updated on
- MARCH 26, 2017
About the Code
Paper Folding Text Effect with CSS. You can use this easy CSS code to create a paper-folding text effect that is perfect for any website.
Useful Links: More info | Live Demo
Dependency: –
26 of 36Create 3D Multiple Text-Shadows Effects using CSS and HTML
27 of 36Interactive 3D-Letters using Three.js & Cannon.js
Author
- Angela Galliat
Made with
- HTML / CSS / JS
Created on
- APRIL 4, 2021
Updated on
- APRIL 7, 2021
About the Code
In this tutorial, we’ll be creating interactive 3D letters using Three.js and Cannon.js. We’ll also be using a bit of CSS to style things up. Three.js is a JavaScript library that allows us to create and render 3D graphics in the browser. Cannon.js is a JavaScript library that provides physics for Three.js objects. Try clicking or tapping on various spots of a letter to nudge them away with the force of your cursor.
Useful Links: More info | Live Demo
Dependency: –
28 of 36GSAP JS: multiple text-shadow

Author
- GreenSock
Made with
- HTML / CSS / JS
Created on
- MARCH 29, 2013
Updated on
- NOVEMBER 21, 2019
About the Code
GSAP JS is a powerful tool for creating animations. It can be used to create simple animations or complex ones. In this demo, we will learn how to use GSAP JS to create multiple text-shadow effects. This will allow us to create some very cool and unique effects.
Useful Links: More info | Live Demo
Dependency: jquery(v2.1.3) disgsap(v3.0.1)
29 of 36SCSS 3D text mixin
30 of 36CSS 3D Text Effect

Author
- Kyle Wetton
Made with
- HTML / SCSS
Created on
- SEPTEMBER 26, 2019
Updated on
- SEPTEMBER 26, 2019
About the Code
A new way to create 3D text has been discovered, and it’s using a CSS pre-processor called SCSS. This technique is very easy to use and can be done in just a few minutes. All you need is some basic knowledge of HTML and CSS.
Useful Links: More info | Live Demo
Dependency: –
31 of 36Pseudo 3D text
32 of 36’80s Inspired Pure CSS graphics
Author
- CurleyWebDev
Made with
- HTML / CSS
Created on
- July 3, 2020
Updated on
- SEPTEMBER 18, 2020
About the Code
The ’80s were a time of big hair, bold colors, and loud music. And while fashion and music may have changed since then, the ’80s are still influencing pop culture today. One way this is happening is through pure CSS graphics. These are images that are created entirely with code, no images or fonts are needed. And they often have a retro feel to them.
Useful Links: More info | Live Demo
Dependency: font
33 of 363D effect with shadows
34 of 363D Text Stroke using Less
35 of 363D Text – Mouse effect
Author
- Louis Hoebregts
Made with
- HTML / SCSS / JS
Created on
- MAY 12, 2020
Updated on
- September 21, 2016
36 of 363D Text (scss) – animated

Author
- Sarah Fossheim
Made with
- HTML / SCSS
Created on
- MARCH 24, 2020
Updated on
- APRIL 2, 2020
About the Code
3D Text is a popular way to add depth and interest to your text. It can be used for headlines, logos, or even just plain old text on a web page. The best part about 3D Text is that it’s easy to create using SCSS. In this demo, you have a simple 3D Text animation using SCSS.
Useful Links: More info | Live Demo
Dependency: –
Discussion about this post