Text Shadows in CSS

Text shadows are created with the text-shadow CSS property. It takes a list of shadows separated by commas to be applied to the text and any of its styles. Each shadow is defined by a combination of the element's X and Y offsets, blur radius and color.

Each shadow is defined by two or three <length> values, followed by a <color> value if desired. The <offset-x> and <offset-y> values are the first two <length> values. The blur-<radius> value is the third, optional, length value. The <color> of the shadow is represented by the <color> value.

Shadows are applied front-to-back when more than one is provided, with the very first shadow on top.

Syntax

The following is the syntax for making a basic text-shadow. The first two variables determine the position of your shadow, the third determines the level of blur, and the fourth determines the color of the shadow.

text-shadow: <offset-x> <offset-y> blur-radius color | none |initial | inherit;

• Insert a comma-separated list of shadows to the text if you want to add more than one shadow.

Example:

text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);

Property Values

<offset-x> <offset-y>	Required	The shadow's distance from the text is specified by these <length> variables. The horizontal distance is specified by offset-x; a negative value places the shadow to the left of the text. The vertical distance is specified by offset-y; a negative value throws the shadow over the text. If both values are 0, the shadow is put precisely below the text, however owing to the impact of <blur-radius>, it may be partially visible.
blur-radius	Optional	This is a value of the type <length>. The blur gets greater as the value goes up; the shadow gets wider and lighter. It defaults to 0 if not supplied.
color	Optional	The shade of the shadow's color. It can either come before or after the offset values. If left unknown, the color's value is determined by the user agent; therefore, if cross-browser consistency is needed, you should specify it explicitly.
none	Default	No Shadow
initial		Sets this property to its default value.
inherit		Inherits this property from its parent element.

Also, keep in mind that you may utilize RGBA values for color, such as a white transparency of 40%:

p{      
       text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}

It is not a compulsion to use rgba for shadow color; we may use any of the CSS colorways instead. However, for a shadow, rgba is the best color option since it offers an additional dimension to interact with. The alpha value may be used to control the opacity of the shadow as well as its location, blur, and color.

This is really easier than dealing with other color approaches since you don't have to go looking for a good accent color that is slightly darker or lighter than the backdrop color. You may use black or white in RGBA and lower the opacity to mix it in with the backdrop.

Single Shadow

Example:

.yellow-text-shadow {
text-shadow: yellow 0 -2px;
}

<p class="yellow-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit uptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Multiple shadows

Here’s the basic outline of the syntax. There’s a comma after the first two shadows and a semicolon after the last shadow.

text-shadow: shadow1, shadow2, shadow3;

Example:

.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;                color: white;
font: 1.5em Georgia, serif;
}

<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Type of Shadows

The beautiful thing about text-shadows is that they can be used for a lot more than drop shadows.

Letterpress

The first step is to make the text color a shade darker than the background color. Apply a soft white text-shadow with a low opacity next.

Set the background color to #222 and the text to black with 60% opacity. Finally, a white shadow with 10% opacity was positioned slightly below and to the right.

body {
    background: #222;
}
#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);

Output:

Hard Shadow

Your shadow does not need to be blurred in any way. Hard text shadows are popular due to their vintage appeal.

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Output:

Double Shadow

The concept is to use two shadows, the first of which should be the same hue as your background.

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Output:

Down and Distant

The results are easily impressive once you start stacking up on the shadows. It's quite simple to begin creating some fantastic faux 3D effects that your web design smart consumers won't think is live text.

I used four shadows in total, all pointing straight down and with different degrees of length and blur.

text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);

Output:

Close and Heavy

Another variation on the same theme, this time with three shadows placed considerably closer to the source. The effect gives your words a bit more weight.

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);

Output:

Mark Dotto’s Seriously 3D Text

Here's one that I've always felt was very outstanding. It makes use of a whopping twelve different shadows to create a very convincing 3D illusion.

text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

Output:

Gordon Hall’s True Inset Text

Gordon used some serious CSS wizardry to achieve not only an exterior but also a true inside shadow. A comprehensive explanation of the approach may be found in his blog article.

background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Output:

Soft Emboss

color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Output:

Text-shadows, like other CSS effects, are relatively simple to construct in their most basic form, but they may take on a number of various shapes if you put some effort into them. You may layer CSS shadows on top of each other using commas as a divider to drastically increase the effect's intrigue and realism.