Search code examples
cssborderrgba

Transparent text with solid stroke in CSS

I have an image as background on my body (purple kind of gradient). In the middle of the page there's some text. I want the text to be transparent (i.e. show the purple gradient) but I want a solid color 1px stroke on the text to be visible.

text-shadow: 1px 0 red, -1px 0 red, 0 1px red, 0 -1px red;

wont work because if you make the text transparent, you'll see the shadows.

color: rgba(0,0,0,0);

doesn't make the text see through and..

opacity: 0;

stuff makes the stroke opaque as well.

Any ideas? Is this possible with CSS only ?

EDIT: I just read about text-stroke. But can't find anything useful.

Solution 
  • article h1 {
color: rgba(0, 0, 0, 0.2); 
-webkit-text-stroke: 1px black;

    }