Generador de decoración de texto

• Vista previa en vivo instantánea: ve los cambios de decoración del texto en tiempo real mientras ajustas estilo, color, grosor y desplazamiento. Nuestro generador actualiza la vista previa al instante, sin pulsar ningún botón. Escribe tu propio texto de vista previa para ver exactamente cómo queda la decoración con tu contenido.
• Compatibilidad total con propiedades CSS: controla cada propiedad CSS de text-decoration: línea (subrayado, línea superior, tachado), estilo (sólido, doble, punteado, discontinuo, ondulado), color, grosor (1-10 px) y desplazamiento del subrayado (0-20 px). El generador produce tanto las propiedades individuales como la notación abreviada.
• 100 % privado, sin subidas a servidores: toda la generación del CSS de decoración de texto ocurre localmente en tu navegador. Tu texto y tus elecciones de diseño nunca salen de tu dispositivo ni se envían a ningún servidor: totalmente seguro para proyectos de clientes y contenido propietario.
• Gratis y sin registro: genera CSS de decoración de texto ilimitado sin registro, suscripción ni límites de uso. Nuestro generador es totalmente gratis para siempre y sin límites de cuántas veces lo uses.

La decoración de texto de CSS añade líneas visuales al texto: subrayados debajo, líneas superiores encima y tachados en el centro. La propiedad abreviada text-decoration controla el tipo de línea, el estilo, el color y el grosor, todo en una sola declaración. El CSS moderno también admite text-underline-offset y text-decoration-thickness para un control preciso. Nuestro generador facilita la exploración visual de estas propiedades y obtener CSS listo para producción.

1. Elige un preajuste o empieza a personalizar: explora 8 preajustes que cubren estilos comunes de decoración de texto (subrayado clásico, subrayado doble, ondulado, línea superior discontinua, tachado punteado, desplazamiento grueso, ondulado fino). Haz clic en cualquier preajuste para aplicarlo al instante.
2. Personaliza cada propiedad: selecciona la línea de decoración (subrayado, línea superior, tachado o ninguna), elige entre 5 estilos (sólido, doble, punteado, discontinuo, ondulado), escoge cualquier color con el selector o los preajustes, ajusta el grosor con un control deslizante (1-10 px) y define el desplazamiento del subrayado (0-20 px o auto). Escribe tu propio texto de vista previa y ajusta el tamaño y el grosor de la fuente para que coincidan con tu contexto de diseño.
3. Copia el CSS: haz clic en «Copiar CSS» para copiar el bloque CSS completo al portapapeles. Incluye tanto las declaraciones de propiedades individuales como la notación abreviada, listo para pegar en tu hoja de estilos.

• text-decoration-line: define qué línea se dibuja. Usa underline para enlaces y énfasis, overline para títulos decorativos, line-through para efectos de tachado (precios rebajados, tareas completadas) o none para quitar la decoración.
• text-decoration-style: controla el estilo visual de la línea. Elige solid para líneas estándar, double para dos líneas paralelas, dotted o dashed para efectos sutiles, o wavy para decoraciones divertidas o que indican errores.
• text-decoration-color: define el color de forma independiente al color del texto. Esto permite usar un color de acento de marca para los subrayados mientras el cuerpo del texto queda en un color neutro, un patrón de diseño habitual que nuestro generador facilita.
• text-decoration-thickness: controla el ancho de la línea (1-10 px). Las líneas más gruesas son más visibles y pueden servir como elemento de diseño, mientras que las finas son sutiles y discretas. Usa el control deslizante de nuestro generador para encontrar el equilibrio perfecto.
• text-underline-offset: controla la distancia entre la línea base del texto y el subrayado. Un desplazamiento mayor crea más espacio entre el texto y la línea, mejorando la legibilidad con subrayados gruesos. Ponlo en auto para el valor predeterminado del navegador.

La forma abreviada text-decoration es compatible con todos los navegadores. Las propiedades individuales como text-decoration-thickness y text-underline-offset son compatibles con Chrome 87+, Firefox 70+, Safari 12.1+ y Edge 87+. El estilo ondulado tiene amplio soporte en todos los navegadores modernos. Para máxima compatibilidad, nuestro generador ofrece tanto la sintaxis de propiedades individuales como el equivalente abreviado.