CSS Text Outline or Shadow

September 15, 2017
Use text-shadow

text-shadow: h-shadow v-shadow blur-radius color

If the shadow isn’t intense enough, you can repeat it multiple times.

The following example use a white text with black outline (intensity is repeated 4 times).

color: #fff;

/* thick outline */
text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;

/* thin outline */
text-shadow: 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000;

/* thick 3D-effect */
text-shadow: 1px 1px 1px #000, 1px 1px 1px #000, 1px 1px 1px #000, 1px 1px 1px #000;

/* thin 3D-effect */
text-shadow: 1px 1px 0px #000, 1px 1px 0px #000, 1px 1px 0px #000, 1px 1px 0px #000;
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.