Generador de CSS Text-Shadow (Multi-Capa)
Color
CSS text-shadow acepta una lista de sombras separadas por comas, y el truco para neón, texto 3D, contorno y long-shadow es apilar 2-20 capas con distintos offsets, blurs y colores. Esta herramienta te deja construir esa pila visualmente: sliders x/y/blur/color por capa, preview en vivo sobre cualquier fondo, y seis presets (subtle, glow, neon, 3D, outline, long-shadow) desde los que puedes ajustar. La salida es CSS text-shadow puro — pégalo en cualquier stylesheet.
text-shadow: 0px 0px 12px rgba(56,189,248,0.85); font-size: 72px; font-weight: 700; color: #ffffff;
Cómo usar
- Escribe tu texto de preview y elige tamaño, peso, color y fondo.
- Elige un preset para empezar, clica un chip de capa y arrastra los sliders x/y/blur o cambia el color.
- Pulsa + para añadir más capas, copia el CSS y pégalo en tu stylesheet.
Preguntas frecuentes
- ¿Cómo funciona el preset outline?
- Apila cuatro sombras con blur 0 en las cuatro esquinas diagonales (±1px, ±1px). Es la forma más barata de fingir un contorno en CSS — `text-stroke` es la solución real pero el soporte fuera de WebKit aún es flojo.
- ¿Por qué el preset neón usa cuatro capas?
- Un glow neón convincente necesita al menos 3 capas: núcleo blanco interior nítido, blur medio en color de acento, y halo suave más amplio. La cuarta capa extiende más el halo. Con menos queda plano; con más de 5 solo ralentizas el paint sin aportar mucho.
- ¿Soporta colores rgba?
- Sí — cualquier valor CSS de color sirve en el campo: hex (#fff), rgb(), rgba(), hsl(), hsla(), oklch() y colores nombrados. Las sombras suaves suelen necesitar alpha < 1 para leerse como 'glow' y no como mancha.
- ¿Afecta el rendimiento apilar muchas capas?
- Cada capa es una operación de composición — 20+ sombras desenfocadas en un titular grande cuestan unos ms por paint. Para texto de cuerpo está bien; en hero text gigante vigila las advertencias de paint en DevTools.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.