Generador de efectos de texto CSS

La mayoría de las galerías de efectos de texto CSS te ofrecen un ajuste predefinido fijo: un neón, una extrusión 3D, lo tomas o lo dejas. Este generador, en cambio, construye el CSS a partir de tus parámetros, sobre el texto que realmente escribes. Elige neón, extrusión 3D, grabado/relieve, contorno o relleno degradado en el selector de efecto, ajusta los controles propios de ese efecto y la previsualización en vivo, junto con el bloque CSS para copiar que aparece debajo, se actualizan ante cada cambio.

El efecto de extrusión 3D merece una explicación: para una profundidad elegida (número de capas apiladas) y un ángulo, la capa i se desplaza i × cos(ángulo) en horizontal e i × sin(ángulo) en vertical, calculado en JavaScript con las funciones trigonométricas reales — no a partir de una tabla de búsqueda de ángulos predefinidos. A 45 grados los desplazamientos horizontal y vertical resultan iguales para cada capa, porque el coseno y el seno de 45° comparten el mismo valor; gira el deslizador de ángulo y observa en tiempo real cómo toda la pila de capas de `text-shadow` gira alrededor de las letras, cada una un poco más oscura que la anterior para simular una cara 3D iluminada.

El efecto neón apila cuatro capas de `text-shadow` con un radio de desenfoque creciente en el color que elijas, con un parpadeo opcional: actívalo y se genera y anima en vivo una regla `@keyframes` con una secuencia aleatoria de caídas de opacidad, y un botón te permite regenerar el patrón sin escribir una sola regla keyframe a mano. El texto contorneado aplica `-webkit-text-stroke` para los navegadores que lo soportan, más un respaldo honesto con `text-shadow` en 8 direcciones para los que no; ambas líneas se incluyen en el CSS copiado con una nota que explica el porqué. El relleno degradado recorta un `linear-gradient` sobre la forma del texto con `background-clip: text`, hoy una propiedad estándar con amplio soporte, y se mantiene la línea prefijada `-webkit-` heredada para motores antiguos.

Todo se representa localmente en tu navegador: el texto que escribes nunca se envía a ninguna parte. Copia el bloque CSS terminado (incluida la regla `@keyframes` cuando el efecto la requiera) directamente en tu hoja de estilos.