Gerador de text-shadow CSS
NovoAjuste uma sombra de texto CSS com pré-visualização ao vivo e copie o código.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
Desenha sombras de texto CSS com pré-visualização em tempo real
Este gerador de sombra de texto CSS permite-te desenhar efeitos de profundidade, brilho e contorno visualmente e copiar CSS limpo e pronto para produção. Clica directamente na pré-visualização grande para escrever as tuas próprias palavras, arrasta os controlos de deslocamento, desfoque e opacidade, escolhe uma cor e vê o text-shadow actualizar em tempo real sobre o texto que realmente te interessa.
Muda a família tipográfica, tamanho e peso, define a cor do texto e alterna o fundo entre claro, cinza, escuro e um tabuleiro de xadrez para ver exactamente como a tua sombra aparece em diferentes superfícies — essencial para os efeitos de texto neon e texto brilhante, pois só ficam correctos sobre um fundo escuro.
A sintaxe de text-shadow, explicada
Uma única sombra CSS é escrita como text-shadow: offset-x offset-y blur-radius color. Os valores de offset-x e offset-y movem a sombra horizontal e verticalmente (números negativos lançam-na para cima ou para a esquerda), o blur-radius suaviza a borda (0 mantém-a nítida) e a cor define o tom — geralmente um preto semitransparente para profundidade subtil ou um tom brilhante para um brilho.
Uma sombra clássica e legível é text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Define ambos os deslocamentos para 0 e aumenta o desfoque para um halo suave à volta do texto. Com uma cor brilhante (por exemplo #00eaff) e múltiplos valores de desfoque crescentes, obténs um brilho neon.
Empilha múltiplas sombras: neon, 3D, contorno e sombra longa
O verdadeiro poder de text-shadow é a sobreposição. Podes listar múltiplas sombras de texto numa só declaração separando-as com vírgulas, e o navegador pinta cada uma sequencialmente. 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 durante dez ou mais camadas faz uma sombra longa; e quatro a oito deslocamentos duros à volta dos glifos produzem texto com contorno.
Usa a galeria de presets — Suave, Neon, Brilho, 3D, Sombra longa, Contorno, Retro, Fogo e Letterpress — como ponto de partida. Cada preset carrega a pilha completa de camadas para que possas adicionar, remover, reordenar ou alternar camadas individuais.
Copia CSS, Tailwind ou React Native
Exporta o resultado da forma que o teu projecto precisa. Copiar CSS dá-te 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 browsers: text-shadow está completamente padronizado e não precisa de prefixos -webkit- ou -moz- em nenhum browser actual.
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 secção de sombra de texto do CSSmatic dá-te um conjunto de controlos — útil para uma sombra básica, mas não podes empilhar camadas para efeitos neon ou 3D sem escrever as declarações extra manualmente. css.generator.cool e sites similares oferecem controlos semelhantes de camada única sem efeitos predefinidos.
UtiloKit combina empilhamento de múltiplas camadas, nove presets que carregam uma pilha completa de sombras com um único clique, pré-visualização em tempo real, cópia num clique em três formatos (CSS, Tailwind, React Native) e URL partilhável — sem registo e sem ficheiros 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 rectangular de um elemento. text-shadow também não tem raio de dispersão nem palavra-chave inset — portanto, ao contrário de box-shadow, uma sombra de texto não pode ser inserida. Usa text-shadow em cabeçalhos, logótipos e etiquetas, e box-shadow em cartões e botões.
Se estás a tentar criar um aspecto inserido ou estampado no texto, o truque é uma sombra clara colocada mesmo abaixo de texto escuro (vê o preset Letterpress), não um inset real. E para contornos de texto espessos, a propriedade -webkit-text-stroke é mais limpa do que empilhar oito sombras direccionais.
Dicas para sombras legíveis — e privacidade
As 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. Reserva os efeitos neon e 3D pesados para grandes cabeçalhos de exibição, e confirma sempre que o contraste de texto sobre fundo subjacente ainda cumpre WCAG.
Não há nada para instalar nem conta para criar. Cada pré-visualização e cada linha de CSS gerado é produzida localmente no teu browser, por isso o texto que escrevas nunca abandona o teu dispositivo. Marca este gerador de sombra de texto CSS como favorito e usa o botão Partilhar link para guardar as definições exactas de uma sombra no URL.
Frequently asked questions
Como aplico uma sombra de texto?
Adiciona 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 um desfoque de 4px. Neste gerador, escreve na pré-visualização ao vivo, arrasta os controlos deslizantes e clica em Copiar CSS.
O que é o text-shadow em 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, usa text-shadow na regra do elemento, ex. h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Para caixas, cartões e botões, usa box-shadow. text-shadow segue a forma das letras enquanto box-shadow segue a caixa rectangular do elemento.
Como adicionar sombra ao texto no design?
Numa ferramenta de design como Figma, Sketch ou Photoshop, adiciona um efeito Drop Shadow a uma camada de texto e define 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% torna-se text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
Como crio um efeito de texto brilhante ou neon?
Um brilho neon são 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. Carrega o preset Neon aqui para obtê-lo instantaneamente.
Como crio texto 3D ou de sombra longa?
Ambos os efeitos usam múltiplas sombras com deslocamento sem desfoque. Para texto 3D extrudido, empilha camadas que descem e vão para a direita numa cor progressivamente mais escura. Para uma sombra longa plana, repete uma única sombra sólida 1px de cada vez durante dez ou mais camadas.
Como crio texto com contorno usando text-shadow?
Coloca quatro (ou oito) sombras duras à volta do texto, uma em cada direcçã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. O preset Contorno usa oito direcções.
Como crio múltiplas sombras de texto?
Separa-as com vírgulas dentro de uma única declaração text-shadow: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. O navegador pinta-as por 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 um fundo claro, adiciona uma sombra clara subtil mesmo abaixo de texto cinza escuro, ex. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. O preset Letterpress demonstra exactamente esse truque.
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, usa uma propriedade arbitrária onde os espaços se tornam underscores: class="[text-shadow:2px_2px_4px_#00000066]". O botão Copiar Tailwind desta ferramenta gera essa classe arbitrária.
Preciso de prefixos -webkit- ou -moz- para text-shadow?
Não. text-shadow está completamente padronizado e é suportado sem prefixos em todos os browsers actuais, por isso um simples text-shadow: 1px 1px 2px #000; é tudo o que precisas.
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 rectangular 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?
Usa uma sombra escura suave, de baixa opacidade, com um pequeno deslocamento e alguns pixels de desfoque — por exemplo text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Isto eleva texto branco ou claro de um fundo de foto ou gradiente e melhora o contraste sem parecer pesado.
Como se compara com outras ferramentas de text-shadow como CSSmatic?
CSSmatic tem uma secção de sombra de texto, mas lida apenas com uma única camada — não podes 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, pré-visualização ao vivo e exportação num clique em CSS, Tailwind e React Native.
Como copio o CSS de sombra de texto gerado, e funciona offline?
Clica 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. Usa Partilhar link para guardar as definições exactas no URL. Tudo é gratuito sem registo, corre localmente no teu browser e continua a funcionar sem rede uma vez carregado.
Related tools
Ver todas as ferramentas
Novo Gerador de gradientes CSS
Crie gradientes CSS lineares, radiais e cónicos com pré-visualização ao vivo.
Novo Gerador de box-shadow CSS
Crie box-shadows CSS de várias camadas com predefinições e pré-visualização ao vivo. Copie o CSS, o valor ou o estilo React num instante.
Novo Gerador de paletas de cores
Gere paletas complementares, análogas, triádicas e monocromáticas.
Novo Gerador de cubic-bezier
Desenhe uma curva de easing CSS arrastando pontos de controlo, com pré-visualização ao vivo.
Novo Gerador de border-radius
Crie visualmente cantos arredondados em CSS e formas orgânicas tipo blob.
Novo Playground de Flexbox CSS
Ajuste as propriedades flex com pré-visualização ao vivo e copie o CSS.