How to prevent text-shadow from overlapping text on previous line

Viewed 2227

Is it possible to prevent text-shadow from overlapping text within the same element (e.g. a h1)? Please see an exaggerated example image below – in my use case I would like the text to be very bright white, but instead the shadow is overlapping it and causing murky grey areas.

Example of nasty text-shadow overlap

I made a reduced test case here to demonstrate: http://codepen.io/approach/pen/LgaIe

Note : I deliberately used a small line-height to highlight this issue

5 Answers
Related