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.

WordArt CSS3

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)


See the Pen Rainbow WordArt


See the Pen Blues WordArt


See the Pen Superhero WordArt


See the Pen Radial WordArt


See the Pen Tilt WordArt


See the Pen Purple WordArt


See the Pen Horizon WordArt

Italic Outline

See the Pen Italic Outline WordArt



See the Pen Slate WordArt

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