To understand the CSS text-shadow Property it is best to get familiar with the behaviour of how text-shadow works.

See the Pen ts 1 by Daniel (@Parsons) on CodePen.0

The example above adds a dark grey text shadow to the black default text. First of all the the shadow is set with an offset-x value of ‘1px’ for the horizontal distance. The second value also of ‘1px’ is set for the offset-y or vertical distance. Negative values can also be used. The “#222222” value is the hexadecimal colour value for a dark grey colour.

See the Pen ts 2 by Daniel (@Parsons) on CodePen.0

The above example produces a more pronounced text-shadow with an increase to both the offset-x value and the offset-y value. The colour has also been changed to a lighter grey.

Next is an example with a ‘red’ text colour and a ‘blue’ text-shadow color for contrast.

See the Pen ts 3 by Daniel (@Parsons) on CodePen.0

And here is the same pen with the offset-x and offset-y given a negative value instead.

See the Pen ts 4 by Daniel (@Parsons) on CodePen.0

Another value that can be used with the CSS text-shadow property is ‘blur-radius’.
The following example uses a ‘blur-radius’ of ’10px’.
The offset-x is ‘5px’ the offset-y is 8px and the hexadecimal color of ‘#777777’ gives a light grey shadow.

See the Pen ts 5 by Daniel (@Parsons) on CodePen.0

The ‘blur-radius’ value is optional as opposed to the ‘offset-x’ and ‘offset-y’ values which are required for the CSS text-shadow property to work.

With the ‘blur-radius’ value the higher the value the wider and lighter the blur becomes.

Finally for this last example the text-shadow is set using four values.

See the Pen ts 6 by Daniel (@Parsons) on CodePen.0

The four values for the CSS text-shadow property from left to right are as follows:

  1. offset-x (horizontal shadow distance).
  2. offset-y (vertical shadow distance).
  3. blur-radius (shadow width and lightness).
  4. color (shadow colour).

I encourage you to edit the values of the above example to help in understanding how the CSS text-shadow property works.


CSS3 logo. CSS text-shadow Property

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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