Last Updated: February 25, 2016
·
3.092K
· christophererk

Inset Text Shadow

There are a few approaches out there which cover doing an inset text shadow. I've only found one way to work for me.

color: #737374;
color: rgba(115, 115, 114, 0.9);
text-shadow: 1px 4px 3px #F3F3F3, 0px 0px 0px #000, 1px 4px 6px #F3F3F3;

This works well and falls back to a flat color on older browsers.

Picture

This works because we're using a transparent text color, the shadow becomes visible through the color of the text which gives it an inset effect. This is a nice solution since we can't use inset in the same way we do with a box-shadow.