CSS: Text Shadow

By Xah Lee. Date: . Last updated: .
css shadow
CSS text shadow effects

Simple Shadow

CSS syntax:

text-shadow: x-offset y-offset color

text-shadow: 3px 3px red;

Fuzzy Shadow

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

text-shadow: 3px 3px 3px red;

Multiple Shadows

You can also specify multiple shadows.

-3px -3px 3px green,
3px 3px 3px red;

Glow Effect

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

glow 𝔊𝔏𝔒𝔚 𝔤𝔩𝔬𝔴
#glow87018 {
text-shadow: 0 0 .1em cyan;
padding:.1em .4em;

Outline Effect

The trick for outline font is to 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 𝔒𝔘𝔗𝔏ℑ𝔑𝔈 𝔬𝔲𝔱𝔩𝔦𝔫𝔢
#outline90653 {
  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;

CSS Effects

  1. CSS: Round Corners
  2. CSS: Box Shadow
  3. CSS: Text Shadow
  4. CSS Triangle
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image
  8. CSS: Transition
  9. CSS: Animation

Font Topic

  1. Meaning of Font Size and Em Height
  2. CSS: What font-size is xx-large, x-large, small?
  3. CSS: Font Weight, Bold
  4. Standard Web Fonts
  5. Google Webfont Tutorial
  6. CSS: Text Decoration: Underline, Overline, Line-Through
  7. CSS: Text Shadow
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon