🇺🇸 EN 🇪🇸 ES 🇵🇹 PT 🇹🇷 TR
⌨️ Gerador de Efeito Máquina de Escrever

Crie efeitos de texto animado de máquina de escrever

80ms

Código CSS para seu site

🎮 Ferramentas Divertidas

Por FontGenio Editorial Team · Última atualização: 12 de outubro de 2026

Gerador de Efeito de Digitação

Um gerador de efeito de digitação — um gerador de efeito de máquina de escrever para a web — mostra suas palavras com uma animação de máquina de escrever ao vivo — letras aparecendo uma a uma com um cursor piscando — e dá o código CSS completo para adicionar o mesmo efeito ao seu próprio site. Ajuste a velocidade, o estilo do cursor e a cor acima, veja digitar e copie o código.

Pontos principais

  • Prévia ao vivo estilo terminal: seu texto é digitado caractere por caractere com cursor piscando.
  • Controles de velocidade de digitação (20–200 ms por caractere), 3 estilos de cursor e 7 cores.
  • Gera CSS copiar-colar usando a técnica clássica steps() de máquina de escrever — sem JavaScript no seu site.
  • O efeito é animação CSS pura: texto real que continua selecionável e amigável ao SEO.
  • Roda inteiramente no seu navegador — nada é enviado.

O que é um efeito de digitação?

Um efeito de digitação é uma animação que revela o texto letra por letra, imitando alguém digitando em tempo real, geralmente com um cursor piscando no fim. A implementação web clássica usa só CSS: uma função de temporização steps() avança a largura visível do texto em saltos discretos do tamanho de cada caractere enquanto um border-right piscando faz de cursor. É presença garantida em seções hero, páginas de tema terminal e interfaces estilo chatbot.

Como este gerador de efeito de digitação funciona

A prévia nesta página usa JavaScript para digitar seu texto numa caixa estilo terminal na velocidade escolhida — 20 ms por caractere para uma rajada rápida, 200 ms para um cata-milho deliberado. Você escolhe um dos três cursores (bloco, sublinhado ou nenhum) e uma das sete cores, incluindo o clássico verde de terminal. Cada mudança regenera o código do efeito de digitação abaixo da prévia. O código gerado é a receita honesta e padrão de máquina de escrever: overflow: hidden com white-space: nowrap, um keyframe de digitação animando a largura de 0 a 100% em steps() igual à sua contagem de caracteres, mais um keyframe de piscada alternando a cor da borda. A duração é calculada do tamanho do seu texto e da velocidade, então o CSS casa exatamente com a prévia. Cole na sua folha de estilos, aplique a classe typing-effect, e a animação roda com zero JavaScript.

Exemplo prático: código de animação de digitação

Entrada: Hello, world! a 80 ms por caractere produz um CSS assim (duração autocalculada como 1,0 s para 13 caracteres):

ConfiguraçãoValor neste exemploO que muda
Velocidade80 ms/caractereDuração da animação (13 caracteres → 1,0 s)
CursorBlocoBarra border-right piscando
CorVerde terminal (#0f0)Cor do texto e do cursor
Técnicasteps(13, end)Um salto discreto por caractere

A contagem do steps() sempre iguala o tamanho do seu texto — é isso que faz as letras aparecerem uma de cada vez em vez de deslizar.

Como usar esta ferramenta

  1. Digite seu texto no campo de entrada acima.
  2. Aperte Iniciar para ver a prévia de digitação; ajuste velocidade, estilo de cursor e cor.
  3. Clique em Copiar código — o CSS gerado copia para sua área de transferência.
  4. Cole na sua folha de estilos e adicione class="typing-effect" ao seu elemento de texto.

Onde efeitos de máquina de escrever funcionam melhor

Animações de máquina de escrever brilham em linhas curtas de alto impacto: manchetes hero ("Nós construímos sites."), portfólios de tema terminal, saudações de chatbot e mensagens de estado de carregamento. Focam a atenção porque movimento mais revelação progressiva é inerentemente assistível. Falham em escala — nunca anime com máquina de escrever parágrafos, navegação ou qualquer coisa que usuários precisem escanear. Note também a restrição da técnica: white-space: nowrap significa que o efeito serve para linhas únicas; efeitos de máquina de escrever multilinha precisam de wrappers por linha ou de uma abordagem JavaScript.

Limitações

  • O CSS gerado é só de linha única — texto longo vai transbordar o contêiner em vez de quebrar linha, então mantenha entradas curtas ou adicione seu próprio tratamento responsivo.
  • A contagem do steps() é embutida para sua contagem exata de caracteres; edite o texto depois e você precisa regenerar o código.
  • O efeito não pode ser copiado-colado em redes sociais — como todo CSS, só funciona onde folhas de estilo rodam.
  • Para visitantes que preferem movimento reduzido, condicione a animação a @media (prefers-reduced-motion: no-preference).
  • Leitores de tela anunciam o texto completo de uma vez (o que é ok) — não confie na animação para sequenciar informação.

Efeito de digitação vs. alternativas

MétodoMelhor paraAtenção
Este geradorMáquina de escrever CSS copiar-colar, zero dependênciasLinha única; contagem de caracteres fixa
Gerador de Texto AnimadoEfeitos CSS arco-íris, neon, glitch, puloOutra família de efeitos
Bibliotecas JS de digitação (Typed.js)Sequências multilinha, com loop e apagarAdiciona dependência; precisa de JS ativado
Editores de vídeoTexto de máquina de escrever em vídeos sociaisExportam vídeo, não texto ao vivo

Perguntas Frequentes

Como adicionar efeito de digitação ao site?

Digite seu texto no gerador acima, ajuste velocidade, cursor e cor, depois copie o CSS gerado. Cole na sua folha de estilos e adicione class="typing-effect" ao elemento — sem JavaScript.

Como funciona o efeito de máquina de escrever em CSS?

Ele anima a largura do elemento de 0 a 100% usando steps() com um passo por caractere, então as letras aparecem uma de cada vez. Um border-right piscando faz de cursor. O texto continua sendo HTML real e selecionável.

Posso copiar a animação de digitação para usar no Instagram ou TikTok?

Não. Animações CSS só rodam onde folhas de estilo rodam — sites, não apps sociais. Para vídeo social, recrie o efeito num editor de vídeo e exporte como vídeo.

Quais velocidades de digitação estão disponíveis?

O controle vai de 20 ms por caractere (rapidíssimo) a 200 ms (lento e deliberado), com padrão de 80 ms. A duração do CSS gerado é calculada do tamanho exato do seu texto e da velocidade escolhida.

Quais estilos de cursor posso escolher?

Três: uma barra de bloco piscando (o cursor clássico de terminal), um cursor de sublinhado, ou nenhum cursor. Sete cores estão disponíveis, do verde terminal ao branco, ciano e magenta.

O efeito de digitação prejudica o SEO?

Não. O texto é HTML comum que buscadores leem por inteiro — a animação é puramente apresentacional. É uma vantagem real sobre embutir texto em vídeo.

Por que texto longo transborda com o CSS gerado?

A técnica precisa de white-space: nowrap para medir a largura em passos de caracteres, então só suporta linhas únicas. Mantenha o texto de máquina de escrever em manchetes curtas, ou use uma biblioteca JavaScript para sequências multilinha.

Como torno o efeito acessível?

Envolva a animação em @media (prefers-reduced-motion: no-preference) para visitantes sensíveis a movimento verem texto estático. Leitores de tela anunciam o texto completo de uma vez, o que é aceitável para linhas curtas.

Meu texto é enviado para algum lugar?

Não. A prévia e a geração de CSS rodam no seu navegador. Nada é enviado a um servidor.

Ferramentas relacionadas