CSS Text Outline or Shadow

Sep 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;

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.