CSS: Creating Subtle Text FX with Text-Shadow

We can stack multiple values for text-shadow CSS property. This is an example of using it to create subtle FX on mouse hover.

Anyway, my post's background has #eee color (super light grey). So, to make the text kinda 'invisible', I put the same color as the background.

---

DEMO
Hover on the letters below

---

This is the text

---

This is the CSS of that element <div class='ex-text'></div> : .ex-text{ font-size:4.5em; font-family:consolas; text-align:center; /*to make the text 'invisible'*/ /*I didn't use "transparent" value because..(see below this coding)*/ color:#eee; /*to make the transition enjoyable*/ transition:all 1s; /*these are the initial values of the text-shadow*/ text-shadow: 1px 0 1px #eee, 0px 1px 1px #eee, 3px 3px 1px #eee, 4px 2px 1px #bbb, 5px 1px 1px #ddd; } /*the condition of being hovered*/ .ex-text:hover{ /*these are the final values of the text-shadow*/ text-shadow: 1px 0 1px #eee, 0px 1px 1px #eee, 3px 3px 1px #aaa, 4px 2px 1px #ddd, 5px 1px 1px #ddd; }
Because I don't want to.

---

That's that. Pretty simple, but I think it's neat.

Reference : CSS text-shadow documentation at MDN