CSS3 Text Effects

March 14, 2015
by Inaam Hussain

Following text effects we can do using CSS3.

List of Text Effects Properties

  • text-shadow
  • word-wrap


CSS3 Text Shadow

In CSS3, we can apply shadow to text.

See below image and css code.


Text Shadow

Text Shadow

h2 {
    text-shadow: 5px 5px 5px #FF0000; /* horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow */


CSS3 Word Wrapping

When we write some text with in content area and if word is too long that doesn’t fit in.

So, by using word-wrap we can easily customize word with in content area.

See below image and css code.

Text Wrapping

Text Wrapping

p {
    word-wrap: break-word;


Full HTML & CSS Code

<!DOCTYPE html>
h2 {
    text-shadow: 5px 5px 5px #FF0000;
p.word {
    width: 11em;
    border: 1px solid #000000;
    word-wrap: break-word;
    <h2>Text-shadow effect!</h2>
    <p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
    <p class="word"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>



Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:

Leave a Comment