Ferramentas CSS e de desenvolvimento front-end

Gerador de sombras de texto

Introduza o texto de pré-visualização, ajuste text-shadow em tempo real e copie a declaração CSS.

Parâmetros

Processamento no navegador

Pré-visualização em tempo real

Atualização automática ao alterar os parâmetros
Selecione ou copie diretamente

Crie sombras para texto personalizado e ajuste deslocamentos, desfoque, cor e opacidade.

Os dados introduzidos são processados apenas no seu navegador e nunca enviados para um servidor.

Sobre esta ferramenta

O Gerador de sombras de texto aplica uma sombra à forma dos caracteres, com controlos de deslocamento, desfoque, cor e opacidade. A entrada aparece como texto simples: mesmo etiquetas HTML são apresentadas como texto e nunca executadas como código da página.

Como utilizar

  1. Introduza o texto que pretende pré-visualizar.
  2. Ajuste os deslocamentos horizontal e vertical e um raio de desfoque não negativo.
  3. Escolha a cor e a opacidade da sombra e observe o efeito no texto.
  4. Copie o CSS ou clique em Repor para recuperar os parâmetros iniciais.

Exemplos de utilização

  • Deslocamentos pequenos e opacidade baixa produzem uma sombra discreta.
  • Deslocamentos a 0 com mais desfoque permitem criar um brilho suave.
  • Introduza letras ou símbolos de diferentes sistemas de escrita para comparar as sombras.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

Funcionamento e explicação do CSS

text-shadow usa offset-x offset-y blur-radius color. A sombra segue a forma dos caracteres e não inclui spread-radius nem inset. A cor combina canais validados com a opacidade selecionada.

Utilizações comuns

  • Ajustar efeitos de texto em títulos e cartazes.
  • Criar sombras suaves para textos de marca.
  • Compreender as diferenças entre os parâmetros de sombras de texto e de caixa.

Privacidade

O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.

FAQ

Qual é a diferença entre text-shadow e box-shadow?

text-shadow acompanha os caracteres; box-shadow aplica-se à caixa do elemento.

Porque não existe spread em text-shadow?

A sintaxe padrão de text-shadow inclui dois deslocamentos, desfoque opcional e cor, mas não um raio de expansão.

Posso definir várias camadas de text-shadow?

O CSS aceita várias sombras de texto separadas por vírgulas. Esta página centra-se na geração fiável de uma única sombra.

O HTML introduzido no texto de pré-visualização é executado?

Não. A entrada é apresentada através de nós de texto; etiquetas e conteúdo semelhante a scripts são tratados apenas como texto.

Voltar ao diretório de ferramentas para programadores