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:
- 18 cool things you won’t believe were built using CSS
- 30 jQuery text effect libraries you need to know
- How to create heart shape with CSS
- Animate.css – CSS3 library to create animation easily
Elastic stroke Animation
See the Pen Elastic stroke CSS + SVG by yoksel (@yoksel) on CodePen.
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.
See the Pen SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.
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.
See the Pen Shop Talk logo made in CSS by Hugo Darby-Brown (@hugo) on CodePen.
Slashed Effect
This idea by Robet Messerle gives the knife sliced effect, done with less than 70 lines of CSS.
See the Pen Slashed CSS Effect by Robert Messerle (@robertmesserle) on CodePen.
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.
See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.
Foggy text effect
Andreas creates an awesome cinematic foggy effect. Applicable on Webkit browsers only.
See the Pen Foggy text effect by andreas_pr (@andreas_pr) on CodePen.
SVG text mask
A design by Marco Barria shows an elegant text masking effect on a large background image.
See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.
Text Animation
Yoann created an awesome ticker effect with this text animation. Watch how the second word alternates between three words.
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
Hit The Floor
This 3D effect by ThatGuySam is a simple play on text-shadows, but with an awesome result.
See the Pen Hit The Floor Text Effect by ThatGuySam (@ThatGuySam) on CodePen.
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.
See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.
CSS Text-FX
Moklik added dimmed light effect to the text, giving you intermittent flashes that warn of danger from afar.
See the Pen CSS Text-FX by moklick (@moklick) on CodePen.
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.
See the Pen Animated signing of signature (SVG paths) by Gary Hepting (@ghepting) on CodePen.
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.
See the Pen Colorful Glitchy 404 by mistic100 (@mistic100) on CodePen.
Cosmos
Now this is an elegant and inspiring logo. It is also suitable for use for “Cosmos”, because orbits, get it?
See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.
Loading
A cool loading effect that is simply the hiding and displaying of letters.