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

  1. CSS Text Effects
  2. CSS Text Shadow Effects
  3. CSS Glow Text Effects
  4. CSS Text Animations
  5. CSS Text Glitch Effects
Demo image: SCSS 3D Text Mixin

Creator

  • Liam Egan

Programming language

  • HTML / CSS (SCSS)

Information the code

SCSS 3D Text Mixin

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS 3D Text

Creator

  • Ryan

Programming language

  • HTML / CSS

Information the code

CSS 3D Text

3D text effect in CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Text Marquee Text Marquee - GIF Demo

Creator

  • Comehope

Programming language

  • HTML / CSS

Information the code

Text Marquee

3D text marquee effect in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Simple 3D Text Effect

Creator

  • Paul Grant

Programming language

  • HTML / CSS (SCSS)

Information the code

Simple 3D Text Effect

Skewed and rotated text.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Animated 3D Text

Creator

  • Yusuke Nakaya

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Animated 3D Text

Only CSS 3D wave text effect.

Browser Support: Chrome, Opera, Safari

Dependencies:

Demo image: Layered Fonts in CSS

Creator

  • Mandy Michael

Programming language

  • HTML / CSS (SCSS)

Information the code

Layered Fonts in CSS

CSS text effects with layered fonts.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Multi Coloured 3D Text Effect

Creator

  • Mandy Michael

Programming language

  • HTML / CSS (SCSS)

Information the code

Multi Coloured 3D Text Effect

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Lines and Layered CSS Text Effects

Creator

  • Mandy Michael

Programming language

  • HTML / CSS (SCSS)

Information 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 🙂

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Only 3D Paper Fold Text Effect

Creator

  • Mandy Michael

Programming language

  • HTML / CSS (SCSS)

Information 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.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Shaded Text Shaded Text - GIF Demo

Creator

  • Rafael González

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Shaded Text

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: 3D CSS Typography

Creator

  • Noah Blon

Programming language

  • HTML / CSS (SCSS)

Information the code

3D CSS Typography

Pure CSS animated 3D text.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: 3D Text - CSS Only

Creator

  • Pete Leidy

Programming language

  • HTML / CSS

Information the code

3D Text – CSS Only

3D extrude text effect – CSS only.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: