CSS: Text Shadow/Outline

By Xah Lee. Date: . Last updated: .

This page shows you how to do CSS 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 {
text-shadow:
 -.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;
background-color:black;
}

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 {
color:white;
text-shadow:
  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;
font-size:4ex;
}

Reference

http://www.w3.org/Style/Examples/007/text-shadow.en.html

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Like what you read? Buy JavaScript in Depth