Gerador de text-shadow CSS
NovoAjuste uma sombra de texto CSS com prévia ao vivo e copie o código.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
Crie sombras de texto CSS com visualização em tempo real
Este gerador de sombra de texto CSS permite que você crie efeitos de profundidade, brilho e contorno visualmente e copie CSS limpo e pronto para produção. Clique diretamente na visualização grande para escrever suas próprias palavras, arraste os controles de deslocamento, desfoque e opacidade, escolha uma cor e veja o text-shadow atualizar em tempo real no texto que realmente importa para você.
Mude a família tipográfica, tamanho e peso, defina a cor do texto e alterne o fundo entre claro, cinza, escuro e um tabuleiro de xadrez para ver exatamente como sua sombra fica em diferentes superfícies — essencial para efeitos de texto neon e texto com brilho, pois só ficam corretos sobre fundo escuro.
A sintaxe do text-shadow, explicada
Uma única sombra CSS é escrita como text-shadow: offset-x offset-y blur-radius color. Os valores offset-x e offset-y movem a sombra horizontal e verticalmente (números negativos a jogam para cima ou para a esquerda), o blur-radius suaviza a borda (0 a mantém nítida) e a cor define o tom — geralmente um preto semitransparente para profundidade sutil ou um tom brilhante para um glow.
Uma sombra clássica e legível é text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Defina ambos os deslocamentos para 0 e aumente o desfoque para um halo suave ao redor do texto. Com uma cor brilhante (por exemplo #00eaff) e múltiplos valores de desfoque crescentes, você obtém um brilho neon.
Empilhe múltiplas sombras: neon, 3D, contorno e sombra longa
O verdadeiro poder do text-shadow é o empilhamento. Você pode listar múltiplas sombras de texto em uma única declaração separando-as com vírgulas, e o navegador pinta cada uma em sequência. Empilhar várias sombras da mesma cor com desfoque crescente cria um efeito de texto neon / brilhante; escalonar deslocamentos para baixo e para a direita em tons mais escuros constrói texto 3D extrudido; repetir um deslocamento plano por dez ou mais camadas faz uma sombra longa; e quatro a oito deslocamentos duros ao redor dos glifos produzem texto com contorno.
Use a galeria de presets — Suave, Neon, Brilho, 3D, Sombra longa, Contorno, Retrô, Fogo e Letterpress — como ponto de partida.
Copie CSS, Tailwind ou React Native
Exporte o resultado da forma que seu projeto precisa. Copiar CSS fornece uma declaração padrão de text-shadow; Copiar Tailwind gera uma classe de propriedade arbitrária como [text-shadow:2px_2px_4px_#00000066] que funciona com as utilitárias nativas text-shadow-* do Tailwind v4; e Copiar React Native converte a primeira camada em textShadowColor, textShadowOffset e textShadowRadius.
Boa notícia sobre compatibilidade com navegadores: text-shadow está completamente padronizado e não precisa de prefixos -webkit- ou -moz- em nenhum navegador atual.
Como se compara com CSSmatic, css.generator.cool e outras ferramentas
A maioria das ferramentas de sombra de texto CSS online trabalha com uma única camada de sombra. A seção de sombra de texto do CSSmatic oferece um conjunto de controles — útil para uma sombra básica, mas você não consegue empilhar camadas para efeitos neon ou 3D sem escrever as declarações extras manualmente.
UtiloKit combina empilhamento de múltiplas camadas, nove presets que carregam uma pilha completa de sombras com um único clique, visualização em tempo real, cópia com um clique em três formatos (CSS, Tailwind, React Native) e URL compartilhável — sem cadastro e sem arquivos carregados.
text-shadow vs box-shadow
É um ponto comum de confusão: text-shadow segue o contorno das letras, enquanto box-shadow segue a caixa retangular de um elemento. text-shadow também não tem raio de dispersão nem palavra-chave inset. Use text-shadow em cabeçalhos, logotipos e rótulos, e box-shadow em cards e botões.
Se você está tentando criar um aspecto inserido no texto, o truque é uma sombra clara colocada logo abaixo do texto escuro (veja o preset Letterpress). E para contornos de texto espessos, a propriedade -webkit-text-stroke é mais limpa do que empilhar oito sombras direcionais.
Dicas para sombras legíveis — e privacidade
Sombras são um toque estético, não um substituto do contraste. Para texto sobre fotos, uma única sombra de baixa opacidade como 0 1px 3px rgba(0, 0, 0, 0.5) melhora a legibilidade sem distrair. Reserve os efeitos neon e 3D pesados para grandes títulos de exibição.
Não há nada para instalar nem conta para criar. Cada visualização e cada linha de CSS gerado é produzida localmente no seu navegador, então o texto que você digitar nunca sai do seu dispositivo.
Frequently asked questions
Como aplico uma sombra de texto?
Adicione a propriedade CSS text-shadow a qualquer elemento de texto. A forma abreviada é text-shadow: offset-x offset-y blur-radius color — por exemplo text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) empurra uma sombra suave 2px para a direita e 2px para baixo com desfoque de 4px. Neste gerador, escreva na visualização ao vivo, arraste os controles deslizantes e clique em Copiar CSS.
O que é o text-shadow no CSS?
text-shadow é a propriedade CSS que pinta uma ou mais sombras atrás do texto de um elemento. Cada sombra aceita até quatro valores: um deslocamento horizontal (X), um deslocamento vertical (Y), um raio de desfoque opcional e uma cor — escrita como text-shadow: 1px 1px 2px #000000.
Como posso adicionar uma sombra em CSS?
Para texto, use text-shadow na regra do elemento, ex. h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Para caixas, cards e botões, use box-shadow. text-shadow segue a forma das letras enquanto box-shadow segue a caixa retangular do elemento.
Como adicionar sombra ao texto no design?
Em uma ferramenta de design como Figma, Sketch ou Photoshop, adicione um efeito Drop Shadow a uma camada de texto e defina o deslocamento X/Y, desfoque e cor. Esses quatro valores mapeiam quase um para um em CSS: uma sombra Figma de X 2, Y 2, Blur 4, preto 40% se torna text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
Como crio um efeito de texto com brilho ou neon?
Um brilho neon é várias sombras da mesma cor brilhante empilhadas com deslocamento zero e desfoque crescente. Por exemplo: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; em texto branco contra fundo escuro. Carregue o preset Neon aqui para obter isso instantaneamente.
Como crio texto 3D ou de sombra longa?
Ambos os efeitos usam múltiplas sombras com deslocamento sem desfoque. Para texto 3D extrudido, empilhe camadas que descem e vão para a direita numa cor progressivamente mais escura. Os presets 3D e Sombra longa constroem essas pilhas de camadas para você.
Como crio texto com contorno usando text-shadow?
Coloque quatro (ou oito) sombras duras ao redor do texto, uma em cada direção, com desfoque 0. Por exemplo: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; dá ao texto branco um contorno escuro fino.
Como crio múltiplas sombras de texto?
Separe-as com vírgulas dentro de uma única declaração text-shadow: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. O navegador as pinta em ordem, com a primeira sombra no topo. É assim que se constroem os efeitos neon, 3D, fogo e contorno.
O text-shadow pode ser inset?
Não. Ao contrário de box-shadow, a propriedade text-shadow não tem palavra-chave inset nem raio de dispersão. Para simular um aspecto gravado sobre fundo claro, adicione uma sombra clara sutil logo abaixo de texto cinza escuro, ex. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);.
Como faço uma sombra de texto no Tailwind CSS?
Tailwind CSS v4 inclui utilitárias nativas de sombra de texto (text-shadow-sm, text-shadow-md, text-shadow-lg). Para um valor personalizado, use uma propriedade arbitrária onde os espaços viram underscores: class="[text-shadow:2px_2px_4px_#00000066]".
Preciso de prefixos -webkit- ou -moz- para text-shadow?
Não. text-shadow está completamente padronizado e é suportado sem prefixos em todos os navegadores atuais, então um simples text-shadow: 1px 1px 2px #000; é tudo que você precisa.
Qual é a diferença entre text-shadow e box-shadow?
text-shadow lança uma sombra a partir da forma dos glifos (as próprias letras), enquanto box-shadow lança uma sombra a partir da caixa retangular de um elemento. text-shadow não tem raio de dispersão nem opção inset; box-shadow tem ambas.
Como adiciono uma sombra sutil para melhorar a legibilidade do texto?
Use uma sombra escura suave de baixa opacidade com pequeno deslocamento e poucos pixels de desfoque — por exemplo text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Isso eleva texto branco ou claro de um fundo de foto ou gradiente e melhora o contraste.
Como se compara com outras ferramentas de text-shadow como CSSmatic?
CSSmatic tem uma seção de sombra de texto, mas lida apenas com uma única camada — você não consegue empilhar múltiplas sombras para efeitos neon, 3D ou de contorno sem editar o código manualmente. UtiloKit é a única ferramenta gratuita que combina empilhamento de múltiplas camadas, presets nomeados, visualização ao vivo e exportação com um clique em CSS, Tailwind e React Native.
Como copio o CSS de sombra de texto gerado, e funciona offline?
Clique em Copiar CSS para uma declaração pronta para colar, Copiar Tailwind para a classe de valor arbitrário, ou Copiar React Native para o equivalente textShadowColor / textShadowOffset / textShadowRadius. Use Compartilhar link para salvar as configurações exatas no URL. Tudo gratuito sem cadastro, roda localmente e funciona offline.
Related tools
Ver todas as ferramentas
Novo Gerador de gradientes CSS
Crie gradientes CSS lineares, radiais e cônicos com prévia ao vivo.
Novo Gerador de box-shadow CSS
Crie box-shadows CSS em várias camadas com predefinições e prévia ao vivo. Copie o CSS, o valor ou o estilo React na hora.
Novo Gerador de paleta de cores
Gere paletas complementares, análogas, triádicas e monocromáticas.
Novo Gerador de curva cubic-bezier
Crie uma curva de easing CSS arrastando os pontos de controle, com prévia ao vivo.
Novo Gerador de border-radius
Crie visualmente cantos arredondados CSS e formas orgânicas tipo blob.
Novo Playground de CSS Flexbox
Ajuste as propriedades flex com prévia ao vivo e copie o CSS.