Text shadows – today we are going to investigate in depth the text-shadow css3 property. You probably know, that besides the text-shadow, there is another similar property – ‘box-shadow’. Both the properties are defined in two different modules, however, both properties identically. Thus, if you are already familiar with the box-shadow property, it will be easy for you to learn the ‘text-shadow’. Before all, in order to understand difference, we will read a bit of theory, browser support, and then we will start practicing.
Browser Support
Both properties (text-shadow and box-shadow) are supported by majority of modern browsers ( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10).
Difference between ‘text-shadow’ and ‘box-shadow’
Syntax of box-shadow is the following:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Syntax of text-shadow is the following:
text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
Here are only few differences: first — you can not create an inner shadow for text, second – there is no spread distance for text-shadow. However, you still can create multiple shadows (displayed on top of each other).
Practice with ‘text-shadow’
color and offsets
In the following examples we define horizontal and vertical offsets with custom colors
text-shadow:10px 10px; text-shadow:-5px -5px; color:blue; text-shadow:-1px -1px white; color:blue; background:#888; text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;
Note, that positive offset value moves the shadow to the right/bottom, negative value moves the shadow opposite – to the left/top
The shadow color is optional, if the color is missed, it is inherited from parent’s color. However, you should pay attention that it can acts differently in different browsers, so I recommend to define the color (rgb / rgba / hsla etc).
blur
In the following examples we define various blurring
The blur is optional param, it defines distance of blurring. It should be a positive value (because 0 means – no blur). The following image explains how it works:
element {
text-shadow:5px 5px 3px darkred; color:red;
}
element {
text-shadow:4px -4px 10px red; color:azure; background:#333;
}
element {
text-shadow:0px 0px 4px ;
}
parent {
color:red;
}
element {
text-shadow:0px 0px 4px ;
}
parent {
color:lightgray; background:#333;
}
First two examples use different blur distance, for last two examples we didn’t set the color, but we applied different colors (and background color) for their parents.
Expansion and contraction
Similarly to ‘box-shadow’, the ‘spread’ property is going to be added in CSS4. Currently, it is known, that it is supported in IE10 (probably in more modern browsers). This is forth number parameter for ‘text-shadow’ property. You can use this param to expand or contract the shadow.
text-shadow:5px 5px 0px 3px lightgreen; color:green; text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900; text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;
Positive value increases the shadow, negative – decreases. Zero value can be used to outline the text (third example).
Multiple shadow
As we explained before, you can apply multiple shadows to the text:
Simple outlining (4.1):
text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), /* example 2 */
6px -6px 4px 2px rgba(255,255,255,0.25),
-3px -3px 4px 6px rgba(255,0,255,0.15);
text-shadow: 0 0 0 3px white, /* example 3: neon - 1 */
0 0 2px 6px magenta,
0 0 1px 9px white,
0 0 6px 12px magenta;
color:magenta;
text-shadow: 0 0 2px #fff, /* example 4: neon 2 */
0 0 4px 2px rgba(255,255,255,0.5),
0 0 6px 6px #f0f,
0 0 4px 7px #fff,
0 0 3px 15px #222,
-4px 0 2px 9px #f0f,
4px 0 2px 9px #f0f,
0 -4px 2px 9px #f0f,
0 4px 2px 9px #f0f;
color:white;
text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */
color:magenta;
Emulating expansion
It was already described (that ‘spread’ is supported only in CSS4), however you still can emulate it with CSS3:
text-shadow: 0px 0px 0px 4px magenta;
/* is similar to: */
text-shadow: magenta 0px 2px,
magenta 2px 0px,
magenta -2px 0px,
magenta 0px -2px,
magenta -1.4px -1.4px,
magenta 1.4px 1.4px,
magenta 1.4px -1.4px,
magenta -1.4px 1.4px;
Additional examples
Here are other custom examples:
Twin shadow
text-shadow: 0 0 2px 2px white,
2px 0 2px 5px #222,
3px 0 3px 6px #933,
5px 0 2px 14px #222,
6px 0 5px 16px #533;
background-color:#222;
color:white;
‘Letter-press’
text-shadow: 0px 2px 3px #555; background-color:#333;
Rainbow
text-shadow: 0 0 2px 3px yellow,
0 0 2px 6px orange,
0 0 2px 9px red,
0 0 2px 12px lime,
0 0 2px 15px blue,
0 0 2px 18px violet;
3D
text-shadow: 0 0 1px #999,
1px 1px 1px #888,
2px 2px 1px #777,
3px 3px 1px #666,
4px 4px 1px #555,
5px 5px 1px #444;
background-color:#333;
color:white;
Retro / Vintage effect
text-shadow: 2px 2px #fff,
3px 3px #666;
First-letter-only shadow (pseudo-class ::first-letter)
.text {
text-shadow:0 0 5px;
}
.text::first-letter {
color:azure;
text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}
Flame
Please, consider unlocking the code of the last example using the form below:
[sociallocker]
text-shadow: 0 0 2px #eee,
0 0 4px 2px #fff,
0 -2px 4px 2px #ff3,
2px -4px 6px 4px #fd3,
-2px -6px 11px 6px #f80,
2px -8px 18px 8px #f20;
background-color:#222;
color:white;
[/sociallocker]
