WordArt recreated as CSS3 Text Effects

Good news for WordArt lovers: WordArt is back—in CSS3 form! Apart from being good fun, it’s a good case study into the abilities of CSS3. After studying these, try and create your own CSS3 Text Effects.

Learn how to create WordArt in CSS3

A word of caution: these have been designed for WebKit browsers only (Chrome, Safari and Microsoft Edge). Using these in a production setting might yield unpredictable results for those on different or older browsers.

If you were born in the 20th Century, seeing WordArt again will bring you back to a time of school assignments, reports and title pages.

You can download the CSS with all of the WordArt included here:
WordArt in CSS3 (wordart.css)

Rainbow

Blues

Superhero

Radial

Tilt

Purple

Horizon

Italic Outline

Slate

What was your favourite WordArt style? Let us know in the comments.

• HTML
• css