No momento, estou brincando com CSS3 e tentando obter um efeito de texto como este (a sombra interna preta borrada):

Mas não consigo encontrar uma maneira de criar sombras de texto dentro do texto. Eu me pergunto se isso ainda é possível porque o elemento de sombra de caixa é capaz de renderizar a sombra interna assim:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Alguma ideia?

Aqui vai um pequeno truque que eu descobri usando o :beforee :afterpseudo-elementos:

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

O atributo title deve ser igual ao conteúdo. Demo: http://dabblet.com/gist/1609945

Você deve ser capaz de fazer isso usando a sombra de texto, erm algo assim:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

aqui está um exemplo: http://jsfiddle.net/ekDNq/

Aqui está minha melhor tentativa:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

   
    <span class="inner_shadow">Inner Shadow</span>
   

O problema é como recortar a sombra que vaza nas bordas !!! Tentei no webkit usando background-clip: text, mas o webkit renderiza a sombra acima do fundo, então não funciona.

Fazendo uma máscara de texto com CSS?

Sem uma camada de máscara superior, é impossível fazer uma sombra interna verdadeira no texto.

Talvez alguém deva recomendar que o W3C adicione background-clip: reverse-text , que cortaria uma máscara através do fundo em vez de cortar o fundo para caber dentro do texto.

Faça isso ou renderize a sombra do texto como parte do fundo e recorte-a com background-clip: text.

Tentei posicionar absolutamente um elemento de texto idêntico acima dele, mas o problema é o background-clip: o texto corta o fundo para caber dentro do texto, mas precisamos do inverso disso.

Tentei usar o traço de texto: 20px branco; neste elemento e no acima dele, mas o traço de texto entra e sai.

Métodos Alternativos

Como atualmente não há como fazer uma máscara de texto invertido em CSS, você pode usar SVG ou Canvas e fazer uma imagem de substituição de texto com as três camadas para obter o efeito.

Como o SVG é um subconjunto do XML, o texto SVG ainda seria selecionável e pesquisável, e o efeito pode ser produzido com menos código do que o Canvas.

Seria mais difícil conseguir isso com o Canvas porque ele não tem um dom com camadas como o SVG.

Você pode produzir o SVG no lado do servidor ou como um método de substituição de texto javascript no navegador.

Leitura adicional:

SVG versus Canvas:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Recorte e máscara com texto SVG:

http://www.w3.org/TR/SVG/text.html#TextElement

^{Explicação mais precisa do CSS na resposta de kendo451 .}

Há outra maneira de obter uma ilusão de sombra interna sofisticada,
que explicarei em três etapas simples. Digamos que temos este HTML:

<h1>Get this</h1>

e este CSS:

h1 {
  color: black;
  background-color: #cc8100;
}

Passo 1

Vamos começar tornando o texto transparente:

h1 {
  color: transparent;
  background-color: #cc8100;
}

Passo 2

Agora, recortamos esse fundo para a forma do texto:

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

etapa 3

Agora, a mágica: vamos colocar um borrado text-shadow, que ficará na frente do fundo , dando assim a impressão de uma sombra interna!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

Veja o resultado final .

Desvantagens?

• Só funciona no Webkit ( background-clipnão pode sertext ).
• Várias sombras? Nem pense.
• Você obtém um brilho externo também.

Um exemplo elegante sem a necessidade de um wrapper posicionado ou conteúdo duplicado na marcação:

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

Também fica bem em fundos escuros:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

AND ME LINK E ME2 LINK

Você pode fazer isso. Infelizmente não há como usar uma inserção na sombra do texto, mas você pode fingir com cor e posição. Retire o desfoque e organize a sombra no canto superior direito. Algo assim pode resolver o problema:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

... mas você precisa ter muito, muito cuidado com as cores que usa, caso contrário, ficará estranho. É essencialmente uma ilusão de ótica, então não funcionará em todos os contextos. Ele também não fica bem em tamanhos de fonte menores, portanto, esteja ciente disso.

Não há necessidade de múltiplas sombras ou algo sofisticado assim, você apenas tem que deslocar sua sombra no eixo y negativo.

Para texto escuro em um fundo claro:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

Se você tiver um fundo escuro, pode simplesmente inverter a cor e a posição y:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

Brinque com os valores rgba, a opacidade e o desfoque para obter o efeito certo. Dependerá muito da cor da fonte e do fundo que você tem, e quanto mais pesada a fonte, melhor.

Experimente esta pequena joia de variação:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

Eu normalmente considero "não há resposta" como um desafio

Eu vi muitas das soluções propostas, mas nenhuma foi exatamente o que eu esperava.

Aqui está meu melhor hack nisso , onde a cor é transparente, o fundo e a sombra do texto superior são da mesma cor com opacidades variadas, simulando a máscara, e a segunda sombra do texto é uma versão mais escura e mais saturada da cor que você realmente deseja (muito fácil de fazer com HSLA).

(aliás, texto e estilo com base no OP de um thread duplicado )

Tive alguns casos em que precisei de sombras internas no texto, e o seguinte funcionou bem para mim:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

Isso define a opacidade do texto para 80% e, em seguida, cria duas sombras:

• A primeira é uma sombra branca (presumindo que o texto esteja em um fundo branco) deslocada 1px da esquerda e 2px do topo, desfocada 3px.
• A segunda é uma sombra preta que é visível através do texto com 80% de opacidade, mas não através da primeira sombra, o que significa que ela é visível dentro das letras do texto apenas onde a primeira sombra é deslocada (1px da esquerda e 2px do topo). Para alterar o desfoque dessa sombra visível, modifique o parâmetro de desfoque para a sombra da primeira camada.

Ressalvas

• Isso só funcionará se a cor desejada para o texto puder ser obtida sem que seja necessário ter 100% de opacidade.
• Isso só funcionará se a cor de fundo for sólida (portanto, não funcionará para o exemplo específico do questionador em que o texto fica em um fundo texturizado).

Aqui está um link explicando como fazer isso, deve ser o que você está procurando:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Parece que está funcionando: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Ele está usando várias sombras para obter esse efeito, conforme explicado aqui: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Parece que todo mundo tem uma resposta para essa. Gosto da solução do @Web_Designer. Mas não precisa ser tão complexo assim e você ainda pode obter a sombra interna embaçada que está procurando.

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

Este é facilmente o melhor exemplo que já vi. http://lab.simurai.com/carveme/

A fonte está em gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Com base na :before :aftertécnica de web_designer, aqui está algo que se aproxima do seu visual:

Primeiro, faça seu texto da cor da sombra interna (preto no caso do OP).

Agora, use uma classe: after psuedo para criar uma duplicata transparente do texto original, colocada diretamente sobre ele. Atribua uma sombra de texto normal a ele sem deslocamento. Atribua a cor do texto original à sombra e ajuste o alfa conforme necessário.

http://dabblet.com/gist/2499892

Você não obtém controle total sobre a propagação, etc. da sombra como no PS, mas para valores de desfoque menores é bastante aceitável. A sombra ultrapassa os limites do texto, portanto, se você estiver trabalhando em um ambiente com um fundo-primeiro plano de alto contraste, isso será óbvio. Para itens de menor contraste, especialmente aqueles com o mesmo matiz, não é muito perceptível. Por exemplo, eu fui capaz de fazer um texto gravado de aparência muito agradável em fundos de metal usando esta técnica.

Esta é uma ótima solução para TRUE inset text shadow usando a propriedade background-clip CSS3:

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

Aqui está o que eu vim depois de examinar algumas das ideias aqui. A ideia principal é que a cor do texto se misture com as duas sombras, e observe que isso está sendo usado em um fundo cinza (caso contrário, o branco não aparecerá bem).

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

Experimente este exemplo para sombra de texto inserido. Aqui está o HTML

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

e o CSS

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

para sombra da caixa:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

você pode ver o texto online e a sombra da caixa: texto online e a sombra da caixa

para mais exemplos, você pode ir para este endereço: mais exemplos de código freeclup

Há uma maneira muito mais simples de conseguir isso

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Voilà

Para texto de tamanho normal em botões pequenos

Descobri que as outras ideias nesta página perdem a eficácia quando usadas em pequenos botões com letras de texto pequenas. Essa resposta amplia a resposta de RobertPitt .

Aqui está o pequeno ajuste:

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

Nota:

Usei este site para refinar os tons de cores.

Estou usando deste site, também parece bom. Dê uma olhada nisso Sombra interna