Sombras y degradados de texto

Diseña títulos llamativos: efecto neón, 3D retro, contorno, relieve, fuego o texto relleno con un degradado. Copia el CSS y el HTML.

text-shadow y background-clip: text

text-shadow funciona como box-shadow, pero sigue la forma de cada letra. Tiene desplazamiento X, Y, desenfoque y color (no tiene expansión ni inset). También acepta varias sombras separadas por comas:

.neon {
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #e879f9,
    0 0 20px #d946ef;
}

Para rellenar el texto con un degradado se usa un truco: pones el degradado como fondo, recortas ese fondo a la forma de las letras con background-clip: text y haces transparente el relleno del texto:

.titulo-degradado {
  background-image: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Generador

Cambia entre Sombras y Texto con degradado, escribe tu propio texto y prueba los presets.

Sombras y degradados de texto

Texto

TamañopxPeso

Fuente Sistema (sans-serif)Serif (Georgia)MonoespaciadaImpactTrebuchet

Color del texto

Capas de sombra

3px 3px 6px rgba(0, 0, 0, 0.3)

Capa seleccionada

XpxYpx

DesenfoquepxColor de la sombraOpacidad

Academia Web

.titulo {
  font-family: system-ui, sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  color: #7c3aed;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

Consejos de uso

• Neón se logra con varias sombras sin desplazamiento (0 0) y desenfoque creciente, sobre fondo oscuro.
• 3D / retro: muchas sombras sin desenfoque desplazadas 1 px cada una (1px 1px, 2px 2px, 3px 3px...) crean volumen sólido.
• Contorno: cuatro sombras duras en las cuatro diagonales simulan un borde alrededor de las letras.
• Relieve: una sombra clara arriba a la izquierda y una oscura abajo a la derecha, sobre un texto del mismo tono que el fondo.
• Una sombra sutil (0 2px 4px rgba(0,0,0,.3)) mejora la legibilidad de texto blanco sobre fotos.
• Usa estos efectos sólo en títulos grandes. En párrafos cansan la vista y empeoran la lectura.

Buena práctica

En el texto con degradado deja siempre un color de respaldo antes del truco: si el navegador no soporta background-clip: text, el texto seguirá siendo visible en vez de quedar invisible.

Error común

Con background-clip: text lo que hace transparente el texto es -webkit-text-fill-color: transparent. Si después cambias color (por ejemplo en :hover) no verás ningún cambio: modifica el degradado o el -webkit-text-fill-color. Y recuerda que los efectos con mucho desenfoque pueden reducir el contraste: revisa que el texto se siga leyendo bien.