Bevel[Bevel] effect on PS text in CSS

Question

I’m facing a problem I believe is common among Designer and Dev/Frontier/webdesigner or for lack of communication at the time of creation or for lack of technical knowledge of the developer to apply the technique.

I am producing the development of a Layout that is mounted on a PSD that between the elements/ layers contained in it, there are texts with effects (those that can be enabled and configured in "Blending Options"). Some of the effects can be easily replicated in the CSS, preserving the quality in the use of the elements and their effects, however I am facing problems when replicating the "Chamfer and Notch" (or in the English versions, "Bevel & Emboss") in the texts.

The effect in question that I’m having trouble with is Chanfro/Bevel. I believe that in a nutshell, this effect applies an internal shadow to the element in the same color, but in a darker or lighter tone accompanying the positioning of the "Global Light".

So the text looks something like this:

How to apply in CSS?

In box shadow could use the attribute inset, but this no longer belongs to the parameters of text-shadow.

The Palliative solution is using images (png or svg). I believe that another solution would be to generate another source with these already established characteristics.

Obs¹: For now, in the next works, I asked the Designer to try his best not to use this effect in texts;

Obs²: For the on-call designers, obviously my colleague did not apply this effect as amateurishly as I applied in the above example.

Answer 1

From the contents of that reply by Soen it is possible to approximate the effect with the CSS property background-clip: text.

Although it works on some browsers, this property value is not specified in the documentation, then you should evaluate its use.

h1 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 50px;
  font-weight: bold;
  background-color: #00c;
  color: transparent;
  text-shadow: -1px -1px 6px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<h1>Texto de Exemplo</h1>