CSS: Text Shadow, Glow/Outline Effects

By Xah Lee. Date: . Last updated: .

This page shows you how to do CSS3 text shadow.

css shadow
CSS text shadow effects

Simple Shadow

CSS syntax: text-shadow: x-offset y-offset color

simple shadow
div {
text-shadow: 0.2ex 0.2ex red;

the ex above is a CSS unit meaning the height of letter “x”. 〔►see CSS: Units

Fuzzy Shadow

text-shadow: x-offset y-offset fuzziness color

fuzzy shadow
div {
text-shadow: 0.2ex 0.2ex 0.2ex red;

Multiple Shadows

You can also specify multiple shadows.

multi shadow

p {
 -.2ex -.2ex 0.2ex green,
 0.2ex 0.2ex 0.2ex red;

Glow Effect

The trick is to specify no shadow offset, but with big value of fuzziness.

glow 𝔊𝔏𝔒𝔚 𝔤𝔩𝔬𝔴
div {
text-shadow: 0 0 .1ex cyan;

Outline Effect

The trick for outline font is specify shadow for all 8 directions {top, bottom, left, right, top right, top left, bottom right, bottom left} with minimal offset, and with big value of fuzziness.

outline 𝔒𝔘𝔗𝔏ℑ𝔑𝔈 𝔬𝔲𝔱𝔩𝔦𝔫𝔢
div {
  0.1px   0.0px   1px black,
  0       0.1px   1px black,
 -0.1px   0.0px   1px black,
  0      -0.1px   1px black,
  0.1px   0.1px   1px black,
 -0.1px  -0.1px   1px black,
 -0.1px   0.1px   1px black,
  0.1px  -0.1px   1px black;



Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.