Unlike the box-shadow property, inner-shadow does not support the inset attribute. The following code is NOT valid:
text-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
Which is a bummer, I really wanted to style the logo of my site in CSS and not use an image, font or SVG for it. But I came over a clever hack that solves the issue for us.
How it works
There are 5 steps that are needed to acheive this, and you can see the result of each of them below:
font-size: 4em; /*step 1*/
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /*step 2*/
color: transparent;/*step 3*/
background-color: #F9F9F9;/*step 4*/
background-clip: text;/*step 5*/
How it works:
- The normal style without any applied effects
- The text when a black shadow with opacity applied
- We hide the text the only thing visible is the shadow
- We set the background color to the color we want the text in
- We clip the background to the bounds of the text. This will make the shadow look like it is just on the inside of the text!
Background is a webkit specific property at this point.
UPDATE: Turns out it is tricky to feature test this unless you want to browsersniff. Modernizr has not yet found a good solution: https://github.com/Modernizr/Modernizr/issues/199