12 CSS 3D Text Effects

Collection of hand-picked free HTML and CSS 3D text effect code examples.

Related Articles

  1. CSS Text Effects
  2. CSS Text Shadow Effects
  3. CSS Glow Text Effects

Author

  • Liam Egan

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

SCSS 3D Text Mixin

This is a simple SCSS mixin that creates 3D blocky looking text with CSS text-shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Ryan

Links

  • demo and code

Made with

  • HTML / CSS

About the code

CSS 3D Text

3D text effect in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Comehope

Links

  • demo and code
  • screencast

Made with

  • HTML / CSS

About the code

Text Marquee

3D text marquee effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Paul Grant

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Simple 3D Text Effect

Skewed and rotated text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Yusuke Nakaya

Links

  • demo and code

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Animated 3D Text

Only CSS 3D wave text effect.

Compatible browsers: Chrome, Opera, Safari

Dependencies: –


Author

  • Mandy Michael

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Layered Fonts in CSS

CSS text effects with layered fonts.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Mandy Michael

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Multi Coloured 3D Text Effect

Single element with multi coloured text and 3D text shadow effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Mandy Michael

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

Lines and Layered CSS Text Effects

CSS text effects with layered fonts. Just playing around with different css properties to create fun text effects 🙂

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Mandy Michael

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

CSS Only 3D Paper Fold Text Effect

Attempt at a paper folding effect with text so that it looks like it’s coming off the page.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: –


Author

  • Rafael González

Links

  • demo and code

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Shaded Text

Shaded text, a SVG + CSS3 experiment about animated shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Noah Blon

Links

  • demo and code

Made with

  • HTML / CSS (SCSS)

About the code

3D CSS Typography

Pure CSS animated 3D text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –


Author

  • Pete Leidy

Links

  • demo and code

Made with

  • HTML / CSS

About the code

3D Text – CSS Only

3D extrude text effect – CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –