15 Beautiful Text Effects Created with CSS

Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or typography. With CSS, you can use clipping and add animation to text to spice things up a little.

And to illustrate this, we have collected 15 stunning and cool text effects that are made possible with CSS (some with a little help from Javascript codes).

For more things you can do with CSS, check out:

Elastic stroke Animation

Yoksel animates the stroke of the text with a cool color scheme. This effect is made with CSS and SVG. The result is awesome!

SVG Glitch

Want to make effects that look like a broken analog TV? Dirk Weber made this stunning glitch effect using CSS and SVG filter.

Shop Talk logo

The Shop Talk logo is recreated by Hugo using only CSS. The logo looks similar to the original, complete with the right texture.

Slashed Effect

This idea by Robet Messerle gives the knife sliced effect, done with less than 70 lines of CSS.

Elegant Shadow Effect

Long Shadow effect comes to text, made using CSS. The creator, Juan Brujo made 4 other effects but this is easily the most impressive one.

Foggy text effect

Andreas creates an awesome cinematic foggy effect. Applicable on Webkit browsers only.

SVG text mask

A design by Marco Barria shows an elegant text masking effect on a large background image.

Text Animation

Yoann created an awesome ticker effect with this text animation. Watch how the second word alternates between three words.

Hit The Floor

This 3D effect by ThatGuySam is a simple play on text-shadows, but with an awesome result.

Background Clip Text

Jintos was playing around with a Webkit background clip to add a background image inside text. He made 16 cool creations using this method.


Moklik added dimmed light effect to the text, giving you intermittent flashes that warn of danger from afar.

Animated signing of signature

Gary Hepting created a real-time signing animation. This works by applying Javascript to the SVG path to animate the signing.

Colorful Glitchy 404

Can you hear the sound of this glitch and feel the vibration, inside your head? That’s how good this glitch effect is. mistic100 made with CSS plus a bit of Javascript.


Now this is an elegant and inspiring logo. It is also suitable for use for “Cosmos”, because orbits, get it?


A cool loading effect that is simply the hiding and displaying of letters.