Gerador de decoração de texto

• Pré-visualização ao vivo instantânea: veja as mudanças de decoração do texto em tempo real enquanto ajusta estilo, cor, espessura e deslocamento. Nosso gerador atualiza a pré-visualização na hora, sem botão para apertar. Digite seu próprio texto de pré-visualização para ver exatamente como fica a decoração com o seu conteúdo.
• Suporte completo às propriedades CSS: controle cada propriedade CSS de text-decoration: linha (sublinhado, linha superior, tachado), estilo (sólido, duplo, pontilhado, tracejado, ondulado), cor, espessura (1-10 px) e deslocamento do sublinhado (0-20 px). O gerador produz tanto as propriedades individuais quanto a notação abreviada.
• 100 % privado, sem uploads para servidores: toda a geração do CSS de decoração de texto acontece localmente no seu navegador. Seu texto e suas escolhas de design nunca saem do dispositivo e nunca são enviados a servidor algum: totalmente seguro para projetos de clientes e conteúdo proprietário.
• Grátis e sem cadastro: gere CSS de decoração de texto ilimitado sem cadastro, assinatura ou limites de uso. Nosso gerador é totalmente grátis para sempre, sem limites de quantas vezes você o usa.

A decoração de texto do CSS adiciona linhas visuais ao texto: sublinhados embaixo, linhas superiores em cima e tachados no meio. A propriedade abreviada text-decoration controla o tipo de linha, o estilo, a cor e a espessura, tudo em uma só declaração. O CSS moderno também aceita text-underline-offset e text-decoration-thickness para um controle preciso. Nosso gerador facilita explorar essas propriedades visualmente e obter CSS pronto para produção.

1. Escolha uma predefinição ou comece a personalizar: explore 8 predefinições que cobrem estilos comuns de decoração de texto (sublinhado clássico, sublinhado duplo, ondulado, linha superior tracejada, tachado pontilhado, deslocamento grosso, ondulado fino). Clique em qualquer predefinição para aplicá-la na hora.
2. Personalize cada propriedade: selecione a linha de decoração (sublinhado, linha superior, tachado ou nenhuma), escolha entre 5 estilos (sólido, duplo, pontilhado, tracejado, ondulado), escolha qualquer cor pelo seletor ou pelas predefinições, ajuste a espessura com um controle deslizante (1-10 px) e defina o deslocamento do sublinhado (0-20 px ou auto). Digite seu próprio texto de pré-visualização e ajuste o tamanho e a espessura da fonte para combinar com o contexto do seu design.
3. Copie o CSS: clique em «Copiar CSS» para copiar o bloco CSS completo para a área de transferência. Ele inclui tanto as declarações de propriedades individuais quanto a notação abreviada, pronto para colar na sua folha de estilos.

• text-decoration-line: define qual linha é desenhada. Use underline para links e ênfase, overline para títulos decorativos, line-through para efeitos de tachado (preços em promoção, tarefas concluídas) ou none para remover a decoração.
• text-decoration-style: controla o estilo visual da linha. Escolha solid para linhas padrão, double para duas linhas paralelas, dotted ou dashed para efeitos sutis, ou wavy para decorações divertidas ou que indicam erro.
• text-decoration-color: define a cor independentemente da cor do texto. Isso permite usar uma cor de destaque da marca nos sublinhados enquanto o corpo do texto fica em uma cor neutra: um padrão de design comum que nosso gerador facilita.
• text-decoration-thickness: controla a largura da linha (1-10 px). Linhas mais grossas são mais visíveis e podem servir como elemento de design, enquanto as finas são sutis e discretas. Use o controle deslizante do nosso gerador para encontrar o equilíbrio perfeito.
• text-underline-offset: controla a distância entre a linha de base do texto e o sublinhado. Um deslocamento maior cria mais espaço entre o texto e a linha, melhorando a legibilidade com sublinhados grossos. Defina como auto para o padrão do navegador.

A forma abreviada text-decoration é compatível com todos os navegadores. Propriedades individuais como text-decoration-thickness e text-underline-offset são compatíveis com Chrome 87+, Firefox 70+, Safari 12.1+ e Edge 87+. O estilo ondulado tem amplo suporte em todos os navegadores modernos. Para compatibilidade máxima, nosso gerador fornece tanto a sintaxe de propriedades individuais quanto o equivalente abreviado.