Sombra de texto CSS
Compón sombras de texto multicapa con vista previa en vivo y CSS listo para copiar.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Sombras de texto a medida
Ajusta el desplazamiento, el desenfoque, el color y la opacidad, añade una segunda capa y obtén la propiedad text-shadow con vista previa en vivo sobre el texto.
-
Ajusta la capa 1
X, Y, desenfoque, color, opacidad.
-
Activa la capa 2
Para un contorno o un resplandor.
-
Copia el CSS
Una sola propiedad, lista para pegar.
Anatomía de la propiedad
| Parte | Ejemplo | Función |
|---|---|---|
| Desplaz. X | 2px | Horizontal (negativo = izquierda) |
| Desplaz. Y | 2px | Vertical (negativo = arriba) |
| Desenfoque | 4px | Difusión de la sombra |
| Color | rgba(124, 58, 237, 0.5) | Tono y opacidad |
Capa por defecto: text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5);. Vista previa y cálculo 100 % locales.
Preguntas frecuentes
¿Cómo funciona text-shadow?
La propiedad toma, en orden: desplazamiento horizontal X, desplazamiento vertical Y, radio de desenfoque y luego el color. Ejemplo: text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5). Los valores negativos desplazan a la izquierda/arriba.
¿Se pueden superponer varias sombras?
Sí, separándolas con comas. Esta herramienta ofrece dos capas: la primera dibuja la sombra principal, la segunda (opcional) añade un contorno o un resplandor de otro color.
¿Cómo crear un efecto de resplandor (glow)?
Pon X e Y a 0, aumenta el desenfoque y elige un color vivo con buena opacidad. La luz se difunde uniformemente alrededor del texto. Duplica la capa para intensificar.
¿La sombra perjudica la legibilidad?
Una sombra demasiado marcada puede molestar. Para texto corriente, mantén un desenfoque ligero y una opacidad moderada; reserva los efectos marcados para titulares grandes. La vista previa ayuda a juzgar.