how to make shadow on text using css

how to make shadow on text using css

CSS level 3 has a property called ‘text-shadow’ to add a shadow to each letter of some text. In its simplest form, it looks something like this:

h3 {text-shadow: 0.1em 0.1em #333}

Which adds a dark gray (#333) shadow a little to the right (0.1em) and down (0.1em) relative to the normal text. The result looks like this:

The noak and the barcicle

(As of August 2005, not all browsers fully support ‘text-shadow’ yet. The above should work at least in Safari and Konqueror.)


The simplest form of the ‘text-shadow’ property has two parts: a color (such as the #333 above) and an offset (0.1em 0.1em in the example above). This results in a sharp shadow at the indicated offset. But the offset can also be made fuzzy, resulting in a more or less blurred shadow.

The amount of fuzziness is given as another offset. Here are two lines, one with a little fuzziness (0.05em) and one with a lot (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the

In order to see more clearly


Shadows can make text more readable if the contrast between the foreground and the background is small. Here is an example of white text against a pale blue background, first without a shadow and then with:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Without shadow:

how to make shadow on text using css, css, css3, html, bootstrap, freelancingdesign, MULTIPLE SHADOWS

With shadow:

With a shovel and some oranges


You can also have more than one shadow. In general, that looks rather strange:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Related Posts

Scroll-Then-Fix Content
how to use font-awesome icon in html
How nth-child Works
Loading Facebook Comments ...

1 Comment. Leave new

I truly appreciate this article. Really Great.


Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code * Time limit is exhausted. Please reload the CAPTCHA.

we have updated our price to free for all the product. Dismiss