Как сделать внутреннюю тень у текста который размещен на фоне?

#css

Нужно что то типа такого





div {
  background: url('https://image.freepik.com/fotos-gratis/branco-tijolos-texturas-de-parede-de-fundo_1203-3691.jpg');
  width: 460px;
  height: 120px;
}
h1 {
  color: #444;
  text-align: center;
  padding: 20px 0;
  font-family: Arial;
  font-weight: 800;
  font-size: 62px;
}

  
Hello, World!




    

Ответы

Ответ 1

Пример



div {
  background: url('https://image.freepik.com/fotos-gratis/branco-tijolos-texturas-de-parede-de-fundo_1203-3691.jpg');
  width: 460px;
  height: 120px;
}

h1 {
  text-align: center;
  padding: 20px 0;
  font-family: Arial;
  font-weight: 800;
  font-size: 62px;
  background-color: #111;
  color: transparent;
  text-shadow: -2px 2px 4px rgba(255, 255, 255, .2);  
  -webkit-background-clip: text;
  background-clip: text;
}

  
Hello, World!



Ответ 2

Это грубый пример. поиграй с тенями и добьешься желаемого результата... 



div {
  background: url('https://image.freepik.com/fotos-gratis/branco-tijolos-texturas-de-parede-de-fundo_1203-3691.jpg');
  width: 460px;
  height: 120px;
}

h1 {
  color: #444;
  text-align: center;
  padding: 20px 0;
  font-family: Arial;
  font-weight: 800;
  font-size: 62px;
  text-shadow: 0 2px 1px rgb(100, 108, 42), 0 -2px 0 rgba(0, 0, 0, 1), 0 -2px 0 rgba(0,
0, 0, 0.5), 0 2px 0 rgba(200, 200, 200, .5);
}

  
Hello, World!