Danya Lette

Texturized Text


.class {
 color: red;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;

~textual feelings~

background-clip:text is a handy CSS property but is only currently supported by webkit; when it falls through the results are pretty disastrous i.e. you will not see any text, only an image. This is because the text colour must be set to transparent in order for the newly text-clipped background to be visible through the text.

Luckily, this person figured out how to use background-clip:text while retaining a usable fallback.