Question

I create this text effect:

.inset-text
{
    background-color: #666666;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0 3px 3px;          
}

<p class="inset-text">Some Text</p>

Unfortunately If you try to run this example using Firefox you see a gray rectangle instead in Chrome everything works well.How can I resolve this issue?

Answer 1

Are you sure that background-clip can take the value text? In either w3schools or the Mozilla Developer Network I don’t see this listed. By the way, Firefox now accepts just background-clip too.