Gerador de text-shadow CSS

Gerador de text-shadow CSS

Construa uma declaração CSS text-shadow ajustando deslocamento, desfoque, cor e opacidade, e observe o valor atualizar conforme digita. A ferramenta monta uma ou mais camadas de sombra na ordem correta e sintaxe separada por vírgulas, permitindo copiar uma declaração funcional diretamente para a sua folha de estilos sem ajustes manuais.

Escolha um pré-definido para saltar diretamente para um efeito comum: brilho neon empilha anéis de desfoque crescentes e suavemente desvanecentes no próprio glifo; gravado adiciona um destaque claro oposto a uma sombra escura para um efeito estampado e gravado; 3D em camadas repete uma cor sólida e sem desfoque ao longo do deslocamento para um efeito de letras em bloco empilhadas; e contorno simula um traço usando oito sombras sem desfoque ao redor do texto, pois text-shadow não possui propriedade de traço nativa. Volte a Personalizado para controle manual completo sobre deslocamento X e Y, raio de desfoque, número de camadas, cor e opacidade — cada camada cresce dos valores base que você definir. Escolha entre unidades px e rem, e entre uma declaração CSS simples ou uma classe de valor arbitrário Tailwind para projetos sem folha de estilos onde colar.

O valor gerado não tem limite de tamanho significativo para algumas camadas, mas a ferramenta ainda protege contra saída descontrolada como faz todo gerador neste site, portanto entrada patológica nunca pode congelar a aba. Cada opção recomputa o resultado ao vivo com debounce curto, e a contagem abaixo relata o número de camadas e o comprimento exato em caracteres da declaração.

Tudo roda localmente no seu navegador. Nenhuma cor, deslocamento ou escolha de pré-definição é enviada para lugar nenhum — a ferramenta calcula o CSS inteiramente no seu dispositivo. Quando estiver satisfeito com o resultado, copie, baixe como arquivo .txt ou envie a saída de volta para a entrada para continuar refinando.

FAQ