text-shadow in CSS
Last updated on
The text-shadow property is a way to apply shadow to each letter, where the box-shadow property is applied to the boundaries of the element.
The values of the text-shadow property are:
- offset-x
- offset-y
- blur radius
- colour
As an example:
text-shadow: 1px 1px 2px black;This would set the text-shadow as having a 1 pixel offset on the y and x-axis with a 2-pixel blur and a colour of black. It is also possible to define multiple shadows by comma separating:
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;It is also possible to use HSLa and RGBa values for the colour so you can have transparent text-shadows, as an example:
text-shadow:0px 2px 2px rgba(255, 255, 255, 0.4);Values
The offset x and y values are required, the offset x and y specifies the distance from the text. The offset-y sets the vertical distance, if the value is positive the shadow appears below the text and if the value is negative the shadow is placed above the text. The offset-x is the horizontal distance, if the value is positive then the shadow appears to the right of the text, if negative the shadow appears to the left of the text. If both values are 0 then the shadow would be directly behind the text.
An optional value is a colour. If no colour is set then up to the user agent to determine the colour of the shadow. The value of the colour can be placed before or after the offset values in the property. An optional value of how much the colour is blurred. By default it is 0, the higher the value the large the blur.
Browser support
At the time of writing the text-shadow property is supported in all major browsers without browser prefix. It is supported by IE 10 and up, Firefox, Chrome, Safari and all other browsers. Safari 5.1 does require the colour to be defined for the shadow. Opera Mini ignores the blur-radius value so no blur effect is visible.
More CSS guides
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects