How to Add Text Shadow Using CSS

Instead of filling your web page with boring, regular text, you may choose to decorate your text by adding a shadow. The text shadow property is made possible with CSS. In order to add shadowing to your text, you would use the the following code as shown below:


The first value determines the horizontal position of the shadow. Enter your desired value here in pixels. A positive value moves the shadow to the right, whereas entering a negative value here moves the shadow to the left.

The second value determines vertical positioning, and you will enter a desired value in pixels here as well. A positive value here positions the shadow down, while a negative value positions the shadow up.

The final value is where you would determine the color of the text shadow. A hex code should be placed here.

Make sure you have linked your CSS stylesheet to your HTML document.


Once you have chosen your desired values for your text shadow, use id=shadow as shown below in my example:


If done correctly, your text should now have a text shadow positioned to your liking with the color of your choosing.

For example, this code


will produce the following:


~ Jon Aborde

~ by joa33 on October 1, 2012.

%d bloggers like this: