Acerca de esta herramienta
Este generador añade una sombra a los caracteres del texto con desplazamientos, desenfoque, color y opacidad. El texto se muestra como texto simple: las etiquetas HTML introducidas no se ejecutan como código.
Cómo usarla
- Introduce el texto que quieras previsualizar.
- Ajusta los desplazamientos horizontal y vertical y un radio de desenfoque no negativo.
- Elige el color y la opacidad de la sombra y observa el resultado en tiempo real.
- Copia el CSS o pulsa «Restablecer» para recuperar los parámetros iniciales.
Ejemplos de uso
- Un desplazamiento pequeño y una opacidad baja crean una sombra sutil.
- Con desplazamiento 0 y más desenfoque puedes conseguir un resplandor suave.
- Introduce texto en distintos idiomas o símbolos para comparar las sombras de diferentes caracteres.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);Funcionamiento y explicación del CSS
La estructura de text-shadow es offset-x offset-y blur-radius color. Afecta a los caracteres y no incluye spread-radius ni inset. El color de la sombra se forma con canales y opacidad previamente validados.
Usos habituales
- Ajustar efectos de texto para títulos y carteles.
- Crear sombras suaves para textos de marca.
- Comprender las diferencias entre las sombras de texto y de caja.
Privacidad
Los datos y los resultados se procesan en tu navegador, sin subirse ni guardarse automáticamente. Copia los resultados que quieras conservar antes de salir de la página.
FAQ
¿Qué diferencia hay entre text-shadow y box-shadow?
text-shadow sigue la forma de los caracteres; box-shadow afecta a la caja del elemento.
¿Por qué text-shadow no tiene spread?
La sintaxis estándar solo admite dos desplazamientos, un desenfoque opcional y un color; no incluye radio de expansión.
¿Puedo aplicar varios text-shadow?
CSS permite varias sombras separadas por comas. Esta página se centra en generar una única capa de forma fiable.
¿Se ejecuta el HTML introducido en el texto de muestra?
El contenido se trata como texto; no se ejecutan HTML ni scripts.