CSS Embossed (Inset) Text

Question

I'm trying to give my headings a nice embossed look. It works great in Chrome, but Firefox bows out. How can I make this effect work in both? Here's the fiddle:

https://jsfiddle.net/7p15s3nv/

And my CSS:

h1 {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

Thanks for any help.

Answer 1

maybe without background-clip, but a more 'classical' approach ?

h1:first-of-type {
  background-color: #565656;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
h1+h1 {
   color: rgba(255,255,255,0.4);
  text-shadow: 0 -2px  rgba(0,0,0,0.6);
}

<h1>Hello there! webkit</h1>
<h1>Hello there! FF ?</h1>

fiddle to play with https://jsfiddle.net/7p15s3nv/5/

to test side by side in chrome and any other browser such as IE or FF

Answer 2

Is this the desired output?

h1{
    font-size: 100px;
    color: rgba(255,255,255,0.4);
    text-shadow: 1px 2px 3px #eee, 0 0 0 #000, 1px 2px 3px #eee;
}

<h1>This is text</h1>

UPDATE

This update is to cover the last comment from question author:

h1 {
    margin-top: 0;
    font-size: 200px;
    color: rgba(255,0,0,0.8);
    text-shadow: 1px 2px 0 #EEE, 0 0 0 #000, 1px 2px 0 #EEE;
}

<h1>This is text</h1>

Answer 3

While background-clip is a valid CSS3 property, the text value in non-standard. That's why it does not work in most browsers.

A trick that might work for you is a combination of semi-transparent text (with rgba) and text-shadow like this:

h1 { 
 color: rgba(0,0,0, 0.6);
 /* #FFF should be the same as background color of the text */
    text-shadow: 3px 3px 6px #fff, 0 0 0 #666, 3px 3px 6px #fff; 
  
  }

<h1>TEXT</h1>

Answer 4

I think that the only solution is to duplicate the text in a pseudo.

Not very easy to maintain, but it can work

In case you go with this solution, to make it easier to maintain would be to set the text in an attr in the element, and use this attr for the content of the pseudo

.demo {
  font-size: 200px;
  color: darkgreen;
  position: relative;
}

.demo:after {
  content: "Hello";
  position: absolute;
  left: 0px;
  top: 0px;
  color: transparent;
  text-shadow: 0px 20px 30px rgba(255, 255, 255, 0.91);
}

<div class="demo">Hello</div>