Gerador de Sombra de Texto CSS
Crie text-shadow CSS com até quatro camadas de deslocamento, desfoque, cor e opacidade — com visualização ao vivo no seu próprio texto, depois copie a declaração, a regra CSS completa e HTML.
Entrada
Usado apenas para visualização e snippet HTML — a sombra funciona em qualquer texto.
As camadas são separadas por vírgula; a primeira listada é pintada no topo.
Sombras se parecem muito diferentes em fundos escuros e claros — corresponda à sua página.
Abaixo de 100% de opacidade, a cor é escrita como rgba().
Saída
Seu texto com sombra aparecerá aqui.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-text-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "NEON",
"fontSize": "96",
"fontFamily": "sans",
"fontWeight": "400",
"textColor": "#ffffff",
"bgColor": "#0b0b1a",
"layers": "4",
"offsetX1": "0",
"offsetY1": "0",
"blur1": "4",
"color1": "#ffffff",
"opacity1": "100",
"offsetX2": "0",
"offsetY2": "0",
"blur2": "10",
"color2": "#ff00de",
"opacity2": "100",
"offsetX3": "0",
"offsetY3": "0",
"blur3": "20",
"color3": "#ff00de",
"opacity3": "100",
"offsetX4": "0",
"offsetY4": "0",
"blur4": "40",
"color4": "#ff00de",
"opacity4": "100"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-text-shadow-generator` tool (CSS Text Shadow Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-text-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Sombra de Texto CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
A propriedade CSS text-shadow é pequena mas versátil. Uma camada oferece sombra caída suave. Empilhe várias e você obtém brilhos neon, letras 3D retrô pesadas, contornos nítidos ou aparência de letterpress pressionada. A parte difícil são os números: cada camada tem dois deslocamentos, raio de desfoque e cor, e o efeito só se materializa quando você pode ver as camadas interagindo. Este gerador permite ajustar cada camada com controles deslizantes, ver o resultado no seu texto e copiar CSS que você pode usar imediatamente.
Como usar
- Digite seu texto de amostra e escolha fonte, peso e tamanho. Eles apenas orientam a visualização e snippet HTML, pois a sombra funciona em qualquer texto.
- Defina as cores de texto e fundo para corresponder à sua página. Um brilho que parece ótimo em azul-marinho pode desaparecer em branco.
- Escolha quantas camadas de sombra você deseja (1–4). Cada camada obtém seus próprios controles:
- Deslocamento horizontal / vertical: até onde a sombra se move para a direita/baixo (valores negativos movem para esquerda/cima).
- Raio de desfoque: 0 fornece uma cópia com bordas duras, e valores mais altos a suavizam em brilho.
- Cor da sombra + opacidade: abaixo de 100% de opacidade, a cor é escrita como
rgba().
- Copie a saída. Você obtém a declaração
text-shadowde uma linha, uma regra CSS completa (fonte, cores e sombra) e um snippet HTML correspondente.
Clique em Tente um exemplo para carregar um brilho neon de quatro camadas, que é uma maneira rápida de ver como as camadas empilhadas se combinam. As receitas abaixo fornecem os valores exatos para outros looks clássicos.
Como as sombras de texto em camadas funcionam
text-shadow toma uma lista de sombras separadas por vírgula, cada uma escrita como offset-x offset-y blur-radius color. A primeira sombra da lista é pintada no topo, e cada uma posterior fica atrás da anterior. Essa ordenação é o que faz os efeitos clássicos funcionarem:
- Brilho neon: deslocamentos zero com desfoque crescente:
0 0 4px #fff, então0 0 10px,0 0 20pxe0 0 40pxem uma cor brilhante como#ff00de. Isso cria um halo que é brilhante próximo às letras e desvanece para fora. Use em fundo escuro. - 3D Retrô: sombras duras (desfoque 0) escalonadas na diagonal em tons escurecendo (
2px 2px 0,4px 4px 0,6px 6px 0) extrudam as letras. Uma camada final desfocada e semi-transparente (10px 10px 8px, 30% preto) as ancora. - Contorno: quatro sombras duras (
-2px -2px 0,2px -2px 0,-2px 2px 0,2px 2px 0) traçam um curso ao redor dos glifos. Ao contrário de-webkit-text-stroke, funciona em qualquer lugar. - Letterpress: uma sombra clara
0 1px 0(80% branco) com uma escura0 -1px 0acima dela (20% preto) faz o texto parecer pressionado na página. Funciona melhor em fundos cinza médio.
Ao contrário de box-shadow, text-shadow não tem valor de propagação e sem palavra-chave inset. Se você precisar desses recursos para um cartão ou botão, use o Gerador de Sombra de Caixa CSS em vez disso.
Dicas de desempenho e acessibilidade
- Raios de desfoque grandes em blocos de texto grandes custam tempo de pintura. Mantenha brilhos multi-camada pesados para títulos ao invés de corpo de texto.
- Sombras não contam para contraste de texto. Certifique-se de que a cor do texto sozinha contrasta bem o suficiente com o fundo, porque sombras podem reduzir a legibilidade em tamanhos pequenos.
- Para um efeito animado, consulte o Gerador de Texto Glitch CSS, e para cor dentro das letras ao invés ao redor delas, experimente o Gerador de Texto Gradiente CSS.
Privacidade
Tudo é executado no seu navegador. Seu texto e configurações nunca são enviados.