CSS3 Text Effect

CSS3 Text Effect is the section 5 of Basics of CSS3.

Other than to the text related styling things we learned in our Beginner’s Guide to CSS tutorial, CSS3 offers several new text features.

  • text-shadow
  • word-wrap
  • hanging-punctuation
  • punctuation-trim
  • text-align-last
  • text-emphasis
  • text-justify
  • text-outline
  • text-overflow
  • word-break
  • text-wrap

You might find these features are more important when creating newspaper looking paragraphs and eye catching headings. Let’s go through one by one which are most fascinating to learn. Because some of these properties may not be work on the all browsers. So we selected two of them, which are working almost all of the browsers to demonstrate to you how it works.

Text Shadow

There are two types of shadows that can be included on a HTML page. One shadow property we covered in the Border section as box shadow property. That shadow is applied into boxy elements. But this text-shadow property applied into texts. For examples headings and paragraphs. Look at the following example.

Text Shadow Effect!

[code language=”html”]

Text Shadow Effect!


The values here are the pixel value of horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow. By changing the pixel amount of horizontal shadow, the vertical shadow and the blur distance you can come up with different shadow effects around your text. So you’ll see shadow is not goes only below but upwards by changing those values.

Word Wrap

If a word is too long to fit within an area, it expands outside. You might come across this difficult situation when working with excel spreadsheets. So in excel there is a button to press called word wrap to avoid this situation. You might see this feature on notepad text editor also. If the text is so long in a line, goes beyond the visible screen area, by using word wrap feature you can wrap all the text in the visible area. Like as that CSS3 offers this feature to wrap your text paragraphs. Look at the following which is not wrapped.

Here is a paragraph containing a very long word called thisisaveryveryveryveryveryverylongword.

See what happens. We defined a width of the paragraph elements and had a border around it. But that long word (a character set without spaces) go beyond than the border. To avoid that we can use word wrap.

Here is a paragraph containing a very long word called thisisaveryveryveryveryveryverylongword.

The word-wrap property allows you to force the text to wrap – even if it means splitting it in the middle of a word.

[code language=”css”] p{
word-wrap: break-word;

So in this section we come to know there are many text effects offered by CSS3, but some of them may not be work in all browsers upto now year 2014. Try the properties we demonstrated here because they are working on almost all popular browsers. In the next section we are going to coverup web fonts and finish the texting business on CSS3.


See what is CSS3 Web Fonts.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below