CSS: Outline Text

By Xah Lee. Date: .

Outline text

The trick for outline font is to specify Text 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 blur radius.

Outline text on white background

1px, all 8 directions. 1px fuzz.

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.a8-SgmcN {
 margin: 1rem;
 padding: 0.5rem;
 color: white;
 background-color: white;
 text-shadow: 1px 0px 1px black,
 -1px 0px 1px black,
 0px 1px 1px black,
 0px -1px 1px black,
 1px 1px 1px black,
 1px -1px 1px black,
 -1px 1px 1px black,
 -1px -1px 1px black;
}

1px diagnals only

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.x1px_diag {
 margin: 1rem;
 padding: 0.5rem;
 color: white;
 text-shadow: -1px -1px 1px black,
 1px -1px 1px black,
 -1px 1px 1px black,
 1px 1px 1px black;
}

1px, horizontals. 1px fuzz.

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.bBzDm {
 margin: 1rem;
 padding: 0.5rem;
 color: white;
 background-color: white;
 text-shadow: 1px 0px 1px black,
 -1px 0px 1px black,
 0px 1px 1px black,
 0px -1px 1px black;
}

1px, horizontals. 0 fuzz.

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.wVP9r {
 margin: 1rem;
 padding: 0.5rem;
 color: white;
 background-color: white;
 text-shadow: 1px 0px black,
 -1px 0px black,
 0px 1px black,
 0px -1px black;
}

2px diagnals only

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.x2px_diag {
 margin: 1rem;
 padding: 0.5rem;
 color: white;
 text-shadow: -2px -2px 0 black,
 2px -2px 0 black,
 -2px 2px 0 black,
 2px 2px 0 black;
}

Outline text on black background

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
.a8b-sXMz5 {
 margin: 1rem;
 padding: 0.5rem;
 color: black;
 background-color: black;
 text-shadow: 1px 0px 1px white,
 -1px 0px 1px white,
 0px 1px 1px white,
 0px -1px 1px white,
 1px 1px 1px white,
 1px -1px 1px white,
 -1px 1px 1px white,
 -1px -1px 1px white;
}

Big font outline

Moonlight
.WYP5M {
 display: inline-block;
 color: white;
 background-color: white;

 text-shadow: 1px 0px 1px black,
 -1px 0px 1px black,
 0px 1px 1px black,
 0px -1px 1px black,
 1px 1px 1px black,
 1px -1px 1px black,
 -1px 1px 1px black,
 -1px -1px 1px black;

 font-size: 2rem;
 border: solid thin grey;
 padding: 8px;
 border-radius: 1rem;
}

CSS, Text Decoration

CSS text shadow