Gerador de arte de palavras
Recrie efeitos WordArt clássicos dos anos 90 usando sombras de texto CSS modernas, gradientes e estilos de webkit 3D. Gere código CSS puro para seu próprio site.
Gerador de arte de palavras
Tipografia nostálgica dos anos 90 em CSS moderno
Visualização ao vivo
Visão geral
Bem-vindo de volta à década de 1990. O Word Art Generator presta homenagem aos lendários estilos de texto clip-art que adornavam todos os relatórios de livros do ensino médio e apresentações corporativas do início da era da Internet.
Em vez de depender de arquivos de imagem desajeitados, este gerador usa propriedades CSS3 modernas para recriar esses nostálgicos efeitos 3D, metálicos e de arco-íris.
Os estilos
- Arco do arco-íris: um gradiente esticado e colorido com uma sombra projetada pesada.
- Sunset 3D: um gradiente espesso e extrudado de amarelo a laranja que parece um bloco pesado.
- Cromo metálico: simula uma superfície metálica brilhante e reflexiva usando gradientes nítidos em tons de cinza.
- Neon Glow: Um clássico do modo escuro. Texto vibrante e brilhante com uma sombra externa fortemente desfocada.
- Block Outline: Um estilo de fonte vazio e com traços fortes usando
-webkit-text-stroke. - Harsh Shadow: Uma cor sólida com uma sombra offset muito distinta e não desfocada para uma sensação retrô de quadrinhos.
Como usar (para desenvolvedores)
- Digite sua palavra na caixa de entrada.
- Clique nos diferentes botões de estilo para ver a visualização CSS ao vivo.
- Depois de encontrar a estética retrô perfeita, clique em Copiar código CSS.
- Geraremos automaticamente uma classe CSS (por exemplo,
.word-art-text) contendo os gradientes, fontes e sombras de texto exatos necessários para replicar o efeito. - Cole-o na folha de estilo do seu projeto e aplique a classe a uma tag
<h1>ou<p>!
Perguntas Frequentes (FAQs)
Isso gera uma imagem ou código?
Isso gera código CSS puro! Recriamos meticulosamente a estética clássica do WordArt dos anos 90 sem usar nenhuma imagem. Ao encontrar um estilo de sua preferência, você pode clicar em “Copiar código CSS” e colá-lo diretamente na folha de estilo do seu próprio site.
Posso colar isso em um documento do Word?
Não, esta é uma ferramenta de desenvolvimento web. Se você colar o código CSS no Microsoft Word, ele aparecerá apenas como código de texto. Para usar WordArt real em um documento, você deve usar o recurso ‘Inserir> WordArt’ integrado ao Microsoft Office.
Como você consegue esses efeitos 3D?
Usamos uma combinação de `-webkit-background-clip: text`, CSS complexo `linear-gradient` e propriedades `text-shadow` com muitas camadas para construir profundidade 3D falsa e reflexos metálicos.