AZ Tools

Gerador de CSS Text-Shadow (Multi-Camada)

Cor

CSS text-shadow aceita uma lista de sombras separadas por vírgula, e o truque para neon, texto 3D, contorno e long-shadow é empilhar 2-20 camadas com offsets, blurs e cores diferentes. Esta ferramenta deixa você montar essa pilha visualmente: sliders x/y/blur/color por camada, preview ao vivo em qualquer fundo e seis presets (subtle, glow, neon, 3D, outline, long-shadow) dos quais ajustar. A saída é CSS text-shadow puro — cole em qualquer stylesheet.

—
Presets
Hello
Camadas (1)
CSS
text-shadow: 0px 0px 12px rgba(56,189,248,0.85);
font-size: 72px;
font-weight: 700;
color: #ffffff;

Como usar

  1. Digite o texto de preview e escolha tamanho, peso, cor do texto e fundo.
  2. Escolha um preset para começar, clique num chip de camada e arraste os sliders x/y/blur ou edite a cor.
  3. Use + para adicionar mais camadas, copie o CSS e cole no seu stylesheet.

Perguntas frequentes

Como funciona o preset outline?
Empilha quatro sombras com blur 0 nas quatro diagonais (±1px, ±1px). É o jeito mais barato de fingir contorno em CSS — `text-stroke` é a solução real, mas suporte fora do WebKit ainda é irregular.
Por que o preset neon usa quatro camadas?
Um glow neon convincente precisa de pelo menos 3 camadas: núcleo branco interno nítido, blur médio na cor de destaque, halo macio mais amplo. A quarta camada estende ainda mais o halo. Menos camadas ficam chapadas; mais de 5 só pesam paint sem ganho.
Suporta cores rgba?
Sim — qualquer valor CSS de cor cai no campo: hex (#fff), rgb(), rgba(), hsl(), hsla(), oklch() e nomes. Sombras suaves geralmente precisam alpha < 1 para parecerem 'glow', não 'borrão'.
Empilhar muitas camadas atrapalha performance?
Cada camada é uma operação de composição — 20+ sombras desfocadas num título grande custam alguns ms por paint. Para corpo está ok; em hero text gigante fique atento aos avisos de paint no DevTools.

Ferramentas relacionadas

Simulador de Daltonismo

Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).

Cor00

Gerador de CSS Box Shadow

Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.

Cor00

Conversor de Formatos de Cor

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Cor00

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor00

Gerador de Paleta de Cores

Crie paletas harmoniosas a partir de uma cor base em seis esquemas.

Cor00

Verificador de Contraste de Cor

Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.

Cor00