Actualmente estoy jugando con CSS3 y tratando de lograr un efecto de texto como este (la sombra interior borrosa negra):

Pero no puedo encontrar una forma de crear sombras de texto dentro del texto. Me pregunto si todavía es posible porque el elemento box-shadow puede representar la sombra en el interior de esta manera:

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

¿Algunas ideas?

Aquí hay un pequeño truco que descubrí con el :beforey :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 }

El atributo de título debe ser el mismo que el contenido. Demostración: http://dabblet.com/gist/1609945

Debería poder hacerlo usando la sombra de texto, erm, algo como esto:

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

aquí hay un ejemplo: http://jsfiddle.net/ekDNq/

Este es mi mejor intento:

    .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>
   

¡El problema es cómo recortar la sombra que sangra alrededor de los bordes! Probé en webkit usando background-clip: text, pero webkit muestra la sombra sobre el fondo para que no funcione.

¿Hacer una máscara de texto con CSS?

Sin una capa de máscara superior es imposible hacer una verdadera sombra interior en el texto.

Quizás alguien debería recomendar que el W3C agregue background-clip: reverse-text , que cortaría una máscara a través del fondo en lugar de cortar el fondo para que quepa dentro del texto.

O eso o renderiza la sombra de texto como parte del fondo y recórtala con background-clip: text.

Intenté colocar absolutamente un elemento de texto idéntico encima de él, pero el problema es clip de fondo: el texto recorta el fondo para que quepa dentro del texto, pero necesitamos lo contrario.

Intenté usar el trazo de texto: 20px blanco; tanto en este elemento como en el que está encima, pero el trazo del texto entra y sale.

Métodos alternativos

Dado que actualmente no hay forma de crear una máscara de texto invertido en CSS, puede recurrir a SVG o Canvas y hacer una imagen de reemplazo de texto con las tres capas para obtener su efecto.

Dado que SVG es un subconjunto de XML, el texto SVG aún se podría seleccionar y buscar, y el efecto se puede producir con menos código que Canvas.

Sería más difícil lograr esto con Canvas porque no tiene un dom con capas como lo hace SVG.

Puede producir el SVG en el lado del servidor o como un método de reemplazo de texto de JavaScript en el navegador.

Otras lecturas:

SVG versus lienzo:

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

Recorte y enmascaramiento con texto SVG:

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

^{Explicación más precisa del CSS en la respuesta de kendo451 .}

Hay otra forma de obtener una ilusión de sombra interior fantasiosa,
que explicaré en tres simples pasos. Digamos que tenemos este HTML:

<h1>Get this</h1>

y este CSS:

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

Paso 1

Comencemos por hacer que el texto sea transparente:

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

Paso 2

Ahora, recortamos ese fondo a la forma del texto:

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

Paso 3

Ahora, la magia: pondremos un difuminado text-shadow, que quedará delante del fondo , dando así la impresión de una sombra interior!

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

Vea el resultado final .

¿Desventajas?

• Solo funciona en Webkit ( background-clipno puede ser text).
• ¿Múltiples sombras? Ni siquiera lo pienses.
• También obtienes un brillo exterior.

Un ejemplo elegante sin la necesidad de un contenedor posicionado o contenido duplicado en el marcado:

: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>

También se ve bien en fondos oscuros:

: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>

Y YO LINK Y ME2 LINK

Puedes hacer esto. Desafortunadamente, no hay forma de usar un recuadro en la sombra de texto, pero puede simularlo con color y posición. Tome el desenfoque hacia abajo y coloque la sombra en la parte superior derecha. Algo como esto podría funcionar:

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

... pero deberás tener mucho, mucho cuidado con los colores que usas, de lo contrario se verá mal. Es esencialmente una ilusión óptica, por lo que no funcionará en todos los contextos. Tampoco se ve muy bien en tamaños de fuente más pequeños, así que tenlo en cuenta también.

No hay necesidad de sombras múltiples ni nada elegante, solo tienes que compensar tu sombra en el eje y negativo.

Para texto oscuro sobre un fondo claro:

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

Si tiene un fondo oscuro, simplemente puede invertir el color y la posición y:

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

Juega con los valores rgba, la opacidad y el desenfoque para obtener el efecto perfecto. Dependerá mucho del color de fuente y fondo que tengas, y cuanto más pesada sea la fuente, mejor.

Prueba esta pequeña joya de variación:

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

Normalmente tomo "no hay respuesta" como un desafío

He visto muchas de las soluciones propuestas, pero ninguna fue lo que esperaba.

Aquí está mi mejor truco en esto , donde el color es transparente, el fondo y la sombra de texto superior son del mismo color con opacidades variables, simulando la máscara, y la segunda sombra de texto es una versión más oscura y saturada del color que usted realmente quiero (bastante fácil de hacer con HSLA).

(por cierto, el texto y el estilo se basan en el OP de un hilo dupe )

He tenido algunos casos en los que necesitaba sombras internas en el texto, y lo siguiente me ha funcionado bien:

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

Esto establece la opacidad del texto al 80% y luego crea dos sombras:

• La primera es una sombra blanca (asumiendo que el texto está sobre un fondo blanco) desplazada 1px desde la izquierda y 2px desde la parte superior, borrosa 3px.
• La segunda es una sombra negra que es visible a través del texto de 80% de opacidad pero no a través de la primera sombra, lo que significa que es visible dentro de las letras del texto solo donde se desplaza la primera sombra (1px desde la izquierda y 2px desde arriba). Para cambiar el desenfoque de esta sombra visible, modifique el parámetro de desenfoque para la sombra de la primera capa.

Advertencias

• Esto solo funcionará si se puede lograr el color deseado del texto sin tener que tener una opacidad del 100%.
• Esto solo funcionará si el color de fondo es sólido (por lo tanto, no funcionará para el ejemplo específico del interrogador donde el texto se asienta sobre un fondo texturizado).

Aquí hay un enlace que habla sobre cómo hacer esto, debería ser lo que está buscando:

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/

Está usando varias sombras para lograr ese efecto como se explica aquí: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Parece que todo el mundo tiene una respuesta a esta. Me gusta la solución de @Web_Designer. Pero no tiene por qué ser tan complejo como eso y aún puede obtener la sombra interior borrosa que está buscando.

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 es fácilmente el mejor ejemplo que he visto. http://lab.simurai.com/carveme/

La fuente está en gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Sobre la base de la :before :aftertécnica de web_designer, aquí hay algo que se acerca más a su aspecto:

Primero, haga que su texto sea del color de la sombra interior (negro en el caso del OP).

Ahora, use una clase: after psuedo para crear un duplicado transparente del texto original, colocado directamente encima de él. Asígnele una sombra de texto normal sin desplazamiento. Asigne el color del texto original a la sombra y ajuste el alfa según sea necesario.

http://dabblet.com/gist/2499892

No obtiene un control completo sobre la propagación, etc. de la sombra como lo hace en PS, pero para valores de desenfoque más pequeños es bastante aceptable. La sombra sobrepasa los límites del texto, por lo que si está trabajando en un entorno con un fondo-primer plano de alto contraste, será obvio. Para los elementos de menor contraste, especialmente los que tienen el mismo tono, no se nota demasiado. Por ejemplo, he podido hacer un texto grabado al aguafuerte de muy buen aspecto en fondos de metal utilizando esta técnica.

Aquí hay una gran solución para la sombra de texto insertada TRUE usando la propiedad CSS3 de clip de fondo:

.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;
}

Esto es lo que se me ocurrió después de ver algunas de las ideas aquí. La idea principal es que el color del texto se mezcle con ambas sombras y tenga en cuenta que se está utilizando sobre un fondo gris (de lo contrario, el blanco no se verá bien).

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

Pruebe este ejemplo para la sombra del texto insertado. Aquí está el HTML

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

y el 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 de caja:

-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);

puede ver texto en línea y sombra de cuadro: texto en línea y sombra de cuadro

para más ejemplos puedes ir a esta dirección: más código de ejemplo freeclup

Hay una forma mucho más sencilla de lograr esto

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

Voilà

Para texto de tamaño normal en botones pequeños

Encontré que las otras ideas en esta página pierden su eficacia cuando se usan en botones pequeños con letras de texto pequeñas. Esta respuesta amplía la respuesta de RobertPitt .

Aquí está el pequeño 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:

Usé este sitio para refinar los tonos de color.

Lo estoy usando desde este sitio, también se ve bien. Échale un vistazo Sombra interior