Text shadow CSS : Quick how to use guide
CSS Text Shadow: Example code and explanation
Text shadow applies a shadow effect to text via CSS code. This is a simple, easy to use script that anyone can implement on their site. You can either use text shadow to create a simple, singular shadow or multiple. The text shadow code is supported by all major browsers aside from IE9 and all of its predecessors.
There are plenty of text shadow generators out there as well as some very fancy tutorial collections. For the purpose of this tutorial, we are keeping it simple and outlining the methods of one of the scripts that we use most often.
For the example, we are using white text on a light blue background with a darker blue shadow (with 1 pixel blur radius).
We mainly employ this type of text shadow on images and within divs but there are no restrictions on where you can use it. Take a look at our menu bar above. You will see we use a dark green drop shadow to help make it easier to read the text.
Below is the code for the text shadow example pictured above with an explanation
Text-shadow: 1px 1px 1px #00b4ff
The 1st figure represents X or the horizontal value of the shadow. This can either be a positive figure e.g. 4 (which will push it to the right) or a negative value e.g. -4 (which will push it to the left). Entering a 0 would keep the shadow directly under the text.
The 2nd figure represents Y which controls the vertical position. A positive figure e.g. 3 will push the text shadow higher, a negative figure e.g. -1 will lower the shadow.
The 3rd figure refers to the blur radius. This controls how much the text shadow is stretched. The higher the number, the more blurry the text will be. Entering a 0 means no blur.
The # is the colour code. e.g. #000000 is black. A good list of codes can be found at Computer Hope's website here.
If you wish to use our example and incorporate the blue background, below is the code that we used in the div.
<div style=" /* this is the text shadow */ text-shadow:1px 1px #00b4ff; /* this is the font colour */ color:#FFF; /* this is the background colour */ background:#39F;"> hello this is white text on a blue background with a dark blue drop shadow </div>
Hope you have found the above guide useful. If you have, why not let us know below or share this guide for others to use via the social share buttons?
Leave a comment
Has this guide helped you? Have an idea for a guide or need help? Let us know below.