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
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
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?
No. La vista previa utiliza nodos de texto; las etiquetas y las referencias a scripts se tratan como texto.