Categories: CSS, Tutorials

The code for adding shadows onto any text via CSS is actually very simple – it’s only one line! However, unless you understand what each segment is for, it can become very confusing. SO here’s a quick summary of what each little bit does! If you’re not able to see the code below in action, I recommend updating your browser to one which supports text-shadow in CSS3.

The code can be seen below:

Example

text-shadow: 1px 2px 10px #d5354b;

The first variable: 1px
This refers to the x-coordinate of the shadow; in other words, how far left or right it is relative to the text. Negative numbers can be input here in order to get the shadow to the left of the text. Positive numbers move it to the right.

Example

text-shadow: -20px 0px 0px red;

Example

text-shadow: 20px 0px 0px red;

The second variable: 2px
This refers to the y-coordinate of the shadow; in other words how far up or down it sits relative to the text. Negative numbers can be input here in order to move the shadow above the text. Positive numbers put it below.

Example

text-shadow: 0px -20px 0px blue;

Example

text-shadow: 0px 20px 0px blue;

The third variable: 10px
This is the size of the shadow. If the shadow is set to 0 then it will appear exactly as the text does; however, if it’s set to 10px then it will blur by 10 pixels, and thus look more shadow-like. The higher the number, the blurrier it becomes. This means that negative values cannot be input here.

Example

text-shadow: 0px 0px 10px green;

Example

text-shadow: 1px 1px 0px green;

The fourth variable: #d5354b;
This refers to the colour of your new shadow! Traditional CSS colour rules apply here (hex codes, colour names, RGB etc.).

Example

text-shadow: 2px 2px 2px orange;

Example

text-shadow: 2px 2px 2px #5b145c;

And that’s the basics covered! Below are some cool examples (with code) of text-shadow effects. Commas can also be used to separate the values.

Border Shadow

Example

text-shadow:1px 1px #39d,
-1px 1px #39d, 
1px -1px #39d, 
-1px -1px #39d,
0px 1px #39d,
-1px 0px #39d, 
1px 0px #39d, 
0px -1px #39d;

Firey Text

Example

text-shadow: 0px -3px 6px red,
0px -6px 9px orange,
0px -9px 12px yellow;

3 Responses so far.


  1. Edgardo says:

    Your page’s design looks bad. You schould change it. Better design means a lot more conversions, faster load and greater confidence of visitors.

  2. Kathie says:

    Wonderful! Thank you :)

Leave a Reply