Text Effects with CSS (and a little contenteditable trick)

Avatar of Chris Coyier
Chris Coyier on

Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG or anything like that.

Take a look at this beautiful effect:

See the Pen CSS only 3D paper fold text effect by Mandy Michael (@mandymichael) on CodePen.

The fact that it is real text makes it accessible, searchable, and of course, selectable:

Demos are an awesome place to use the contenteditable attribute, which turns any text element into sort of like a textarea or input, in that then anyone can click right into it and change the text.

<h1 contenteditable>Cool Title</h1>

But because many of Mandy’s demos use pseudo elements with text that needs to match the text in the element itself, the text can get out-of-sync:

Never fear! It’s just a few lines of JavaScript to keep those bits of text in sync:

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});

The input event is real handy, as it covers any change in an element’s value, even contenteditable elements. It has decent browser support, just no IE (Edge is fine). If you really needed this for IE, you could still get it done combining events like keyup, paste, and blur and stuff. But you probably don’t need to for a little thing like this.

Now we’re all good:

But before we go, let’s bask in more of Mandy’s creations:

See the Pen Lines and layered css text effects by Mandy Michael (@mandymichael) on CodePen.

See the Pen Stripy Rainbow Text Effect by Mandy Michael (@mandymichael) on CodePen.

See the Pen Single element, multi coloured 3d text effect by Mandy Michael (@mandymichael) on CodePen.

See the Pen Split fractured text by Mandy Michael (@mandymichael) on CodePen.