Generador de text-shadow CSS

Agrega la propiedad CSS text-shadow a cualquier elemento de texto. La forma abreviada es text-shadow: offset-x offset-y blur-radius color — por ejemplo text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) empuja una sombra suave 2px a la derecha y 2px hacia abajo con un desenfoque de 4px. En este generador, escribe en la vista previa en vivo, arrastra los controles deslizantes y haz clic en Copiar CSS para pegar la declaración lista en tu hoja de estilos.

text-shadow es la propiedad CSS que pinta una o más sombras detrás del texto de un elemento. Cada sombra acepta hasta cuatro valores: un desplazamiento horizontal (X), un desplazamiento vertical (Y), un radio de desenfoque opcional y un color — escrito como text-shadow: 1px 1px 2px #000000. Los desplazamientos pueden ser negativos para lanzar la sombra hacia arriba o hacia la izquierda, y el desenfoque por defecto es 0.

Para texto, usa text-shadow en la regla del elemento, por ej. h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Para cajas, tarjetas y botones, usa box-shadow en su lugar. text-shadow sigue la forma de las letras mientras box-shadow sigue la caja rectangular del elemento.

En una herramienta de diseño como Figma, Sketch o Photoshop, agrega un efecto Drop Shadow a una capa de texto y establece su desplazamiento X/Y, desenfoque y color. Esos cuatro valores se mapean casi uno a uno en CSS: una sombra de Figma X 2, Y 2, Blur 4, negro 40% se convierte en text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).

Un brillo neón son varias sombras del mismo color brillante apiladas con desplazamiento cero y desenfoque creciente. Por ejemplo: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; sobre texto blanco contra fondo oscuro. Carga el preset Neón aquí para obtenerlo instantáneamente.

Ambos efectos usan múltiples sombras con desplazamiento sin desenfoque. Para texto 3D extruido, apila capas que bajan y van a la derecha en un color progresivamente más oscuro (1px 1px, 2px 2px, 3px 3px…). Para una sombra larga plana, repite una sola sombra sólida 1px a la vez durante diez o más capas. Los presets 3D y Sombra larga construyen estas pilas de capas por ti.

Coloca cuatro (u ocho) sombras duras alrededor del texto, una en cada dirección, con desenfoque 0. Por ejemplo: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; da al texto blanco un contorno oscuro delgado. El preset Contorno aquí usa ocho direcciones para un borde más limpio.

Sepáralas con comas dentro de una sola declaración text-shadow: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. El navegador las pinta en orden, con la primera sombra en la parte superior. Así es como se construyen los efectos neón, 3D, fuego y contorno.

No. A diferencia de box-shadow, la propiedad text-shadow no tiene palabra clave inset ni radio de dispersión. Para simular un aspecto grabado sobre un fondo claro, agrega una sombra clara sutil justo debajo del texto gris oscuro, por ej. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. El preset Letterpress demuestra exactamente ese truco.

Tailwind CSS v4 incluye utilidades nativas de sombra de texto (text-shadow-sm, text-shadow-md, text-shadow-lg). Para un valor personalizado, usa una propiedad arbitraria donde los espacios se convierten en guiones bajos: class="[text-shadow:2px_2px_4px_#00000066]". El botón Copiar Tailwind de esta herramienta genera esa clase arbitraria para tu sombra exacta.

No. text-shadow está completamente estandarizado y es compatible sin prefijos en todos los navegadores actuales, por lo que un simple text-shadow: 1px 1px 2px #000; es todo lo que necesitas. Los antiguos prefijos -webkit-text-shadow y -moz-text-shadow son obsoletos.

text-shadow lanza una sombra desde la forma de los glifos (las letras mismas), mientras que box-shadow lanza una sombra desde la caja rectangular de un elemento. text-shadow no tiene radio de dispersión ni opción inset; box-shadow tiene ambas. Usa text-shadow para encabezados, logotipos y etiquetas, y box-shadow para tarjetas, botones y paneles.

Usa una sombra oscura suave, de baja opacidad, con un pequeño desplazamiento y unos pocos píxeles de desenfoque — por ejemplo text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Esto eleva el texto blanco o claro de un fondo de foto o gradiente animado y mejora el contraste sin verse pesado.

CSSmatic tiene una sección de sombra de texto, pero maneja solo una capa de sombra — no puedes apilar múltiples sombras para efectos neón, 3D o de contorno sin editar manualmente el código. UtiloKit es la única herramienta gratuita que combina apilamiento de múltiples capas, presets nombrados (Neón, 3D, Retro, Fuego…), vista previa en vivo, y exportación con un clic en CSS, Tailwind y React Native.

Haz clic en Copiar CSS para una declaración lista para pegar, Copiar Tailwind para la clase de valor arbitrario, o Copiar React Native para el equivalente textShadowColor / textShadowOffset / textShadowRadius. Usa Compartir enlace para guardar la configuración exacta en la URL. Todo es gratuito sin registro, se ejecuta localmente en tu navegador y sigue funcionando sin red una vez cargado.