Text effects 5 CSS 3D effects

Text effects

Extruded text

Pure CSS

A Sass function generates a stack of text-shadows that reads as solid depth.

Text effects

Layered text

Pure CSS

Real depth this time: ten copies of the word stacked along Z, so perspective is correct.

Text effects

Pointer-lit text

CSS + JS

The extrusion is a Sass-generated shadow stack whose direction follows your pointer.

Text effects

Letter wave

Pure CSS

Every letter does the same flip; the stagger turns it into a wave.

Text effects

Text ring

Pure CSS

A sentence wrapped around a cylinder, one character per slice.