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.
3D Text Effect in CSS
I woke up and decided to redo one of these old photoshop logo design tutorials in pure CSS.
Author: Jérôme Van Overbeke · Made with: HTML / CSS · Created: July 26, 2014 · Updated: AUGUST 5, 2014
Single-element, multi-colored 3d text effect
Single element with multi-colored text and 3D Text Shadow Effects
Author: Mandy Michael · Made with: HTML / SCSS / JS · Created: MARCH 16, 2017 · Updated: JUNE 8, 2017
Skewed and Rotated Text
We have created the Skewed and Rotated 3d text effects using SCSS. Property used transform: skew and text-shadow.
Author: Paul Grant · Made with: HTML / SCSS · Created: APRIL 5, 2018 · Updated: APRIL 5, 2018
3D Text Effects Animations
We have created CSS 3D text effects animations using SCSS and javascript.
Author: sunset1115 · Made with: HTML / CSS / JS · Created: MAY 25, 2017 · Updated: MAY 25, 2017
Diagonal 3D Text Effects
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.
Author: Chandra Shekhar · Made with: HTML / SCSS / JS · Created: JANUARY 30, 2018 · Updated: DECEMBER 28, 2018 · Dependency: font-awesome jquery
3d text effects on stairs using CSS3
In this demo, we have created CSS 3d text effects in stairs. This trend has been around for a while, but it’s still a popular way to add some dimension and style to your web page.
Author: k marchand · Made with: HTML / CSS · Created: APRIL 22, 2018 · Updated: APRIL 22, 2018
3D Text Effects CSS
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.
Author: Vivin Antony · Made with: HTML / CSS / JS · Created: MARCH 20, 2015 · Updated: FEBRUARY 6, 2017
Lovely 3D text effect in CSS
Playing around with text shadows in CSS to create a faux 3D effect.
Author: Rich · Made with: HTML / CSS · Created: APRIL 12, 2015 · Updated: OCTOBER 2, 2017
3D Engraved Stone with CSS
div rendered as a 3d engraved stone with 3d text. JavaScript is used to show today’s date carved into the stone.
Author: Michael Burridge · Made with: HTML / CSS / JS · Created: MAY 28, 2019 · Updated: JUNE 18, 2019
3D Decorator Pattern Extruded Text with SCSS
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.
Author: JWYL · Made with: HTML / SCSS · Created: DECEMBER 7, 2017 · Updated: SEPTEMBER 8, 2021
3D Text
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!
Author: Johan Fagerbeg · Made with: HTML / SCSS · Created: NOVEMBER 5, 2013 · Updated: MARCH 13, 2017
Onion 3D text
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.
Author: Fabio Ottaviani · Made with: HTML / SCSS / JS · Created: JUNE 14, 2017 · Updated: JUNE 14, 2017 · Dependency: font
3D Text Effect using flip transition
awesome CSS3 3D text flip effect using only CSS, JavaScript, and HTML. Weirdly there are some problems with firefox and the back character animation.
Author: tempo22 · Made with: HTML / SCSS / JS · Created: AUGUST 30, 2013 · Updated: AUGUST 30, 2013
3D Flipping Text
You can also use this technique to create other cool effects like a 3D text rollover or even a 3D text animation.
Author: Hamish Macpherson · Made with: HTML / SCSS / CoffeeScript · Created: MARCH 7, 2014 · Updated: MARCH 7, 2014
3D text flip effect using CSS and splitting.js
3D text flip effect using CSS and splitting.js. It’s a great way to add some extra flair to your website or blog.
Author: Vimalraj · Made with: HTML / SCSS / JS · Created: NOVEMBER 7, 2022 · Updated: NOVEMBER 7, 2022 · Dependency: splitting.css(v1.0.0) splitting.js(v1.0.0)
Playing around with 3d text animation
Interactive 3D text effect using CSS, HTML5 & JavaScript. We’ll also be adding some cool effects like Flipping, and more!
Author: Shaun Greiner · Made with: HTML / CSS / JS · Created: MARCH 4, 2017 · Updated: JUNE 3, 2021
CSS Text Flip animation
Text Flip animation on Link hover done for TemplateFlip site header.
Author: Kanishk Kunal · Made with: HTML / SCSS · Created: FEBRUARY 7, 2017 · Updated: JULY 24, 2017
Diagonal Text Flip Effect
Create an awesome-looking text effect by flipping the text Diagonally.
Author: Michail Yasonik · Made with: HTML / SCSS / JS · Created: NOVEMBER 10, 2014 · Updated: NOVEMBER 10, 2014 · Dependency: jquery.js(v2.1.3)
Text Parallax effect with shadow using ReactJs
Move your Mouse and Play words. Written by React, ES6, Babel transpiler
Author: Siamak · Made with: SCSS / ReactJs · Created: JANUARY 9, 2016 · Updated: JANUARY 9, 2016
3D Text Effect in CSS
3D Text Effect in CSS. Create stunning 3D text effects with just a few lines of code.
Author: Ryan · Made with: HTML / CSS · Created: MAY 28, 2018 · Updated: MAY 28, 2018
3d text marquee effects
3d text marquee effects to your website to make it stand out from the rest.
Author: Comehope · Made with: HTML / CSS · Created: APRIL 28, 2018 · Updated: MAY 24, 2018
Text Wave effect using only CSS
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.
Author: Yusuke Nakaya · Made with: Pug / SCSS · Created: DECEMBER 4, 2017 · Updated: OCTOBER 21, 2019 · Dependency: fonts.googleapis
3D CSS Typography – The Future of Web Design
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.
Author: Author Name · Made with: HTML / CSS · Created: July 1, 2014 · Updated: JUNE 11, 2022
Layered fonts for text in CSS using Rig Shaded
Learn how to use layered fonts for text in CSS using the Rig Shaded plugin. This guide will show you how to create beautiful text with multiple fonts and shading effects.
Author: Mandy Michael · Made with: HTML / SCSS / JS · Created: APRIL 29, 2017 · Updated: JANUARY 19, 2018
Paper Folding Text Effect with CSS
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.
Author: Mandy Michael · Made with: HTML / SCSS / JS · Created: FEBRUARY 25, 2017 · Updated: MARCH 26, 2017
Create 3D Multiple Text-Shadows Effects using CSS and HTML
You can create multiple text-shadow effects using CSS and HTML. This allows you to add depth and dimension to your text.
Author: Pete Leidy · Made with: HTML / CSS · Created: JUNE 29, 2014 · Updated: JUNE 29, 2014
Interactive 3D-Letters using Three.js & Cannon.js
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.
Author: Angela Galliat · Made with: HTML / CSS / JS · Created: APRIL 4, 2021 · Updated: APRIL 7, 2021
GSAP JS: multiple text-shadow
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.
Author: GreenSock · Made with: HTML / CSS / JS · Created: MARCH 29, 2013 · Updated: NOVEMBER 21, 2019 · Dependency: jquery(v2.1.3) disgsap(v3.0.1)
SCSS 3D text mixin
This is a simple SCSS mixin that creates 3D blocky-looking text with text shadows.
Author: Liam Egan · Made with: HTML / SCSS · Created: SEPTEMBER 24, 2018 · Updated: MAY 13, 2020
CSS 3D Text Effect
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.
Author: Kyle Wetton · Made with: HTML / SCSS · Created: SEPTEMBER 26, 2019 · Updated: SEPTEMBER 26, 2019
Pseudo 3D text
I’m using pseudo-3D techniques to form text out of particles. Horizontal movement is automatic, but you can change the vertical angle by moving the mouse.
Author: JK · Made with: Pug / SCSS / JS · Created: July 24, 2018 · Updated: MARCH 9, 2019
’80s Inspired Pure CSS graphics
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.
Author: CurleyWebDev · Made with: HTML / CSS · Created: July 3, 2020 · Updated: SEPTEMBER 18, 2020 · Dependency: font
3D effect with shadows
Two different approaches to creating editable 3D text
Author: Philip Zastrow · Made with: HTML / SCSS · Created: July 31, 2015 · Updated: MARCH 19, 2021
3D Text Stroke using Less
3D Text Stroke using Less
Author: w3tweaks · Made with: HTML / Less · Created: NOVEMBER 8, 2022 · Updated: NOVEMBER 8, 2022
3D Text – Mouse effect
3D text mouse effect using HTML, SCSS, and JS. The goal is to have an HTML file with a running application that shows the user’s mouse position on the screen in 3D text.
Author: Louis Hoebregts · Made with: HTML / SCSS / JS · Created: MAY 12, 2020 · Updated: September 21, 2016 · Dependency: p5.js
3D Text (scss) – animated
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.
Author: Sarah Fossheim · Made with: HTML / SCSS · Created: MARCH 24, 2020 · Updated: APRIL 2, 2020
