Sombra de texto CSS
Componha sombras de texto multicamada com pré-visualização ao vivo e CSS pronto a copiar.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Sombras de texto à medida
Ajuste o deslocamento, o desfoque, a cor e a opacidade, acrescente uma segunda camada e obtenha a propriedade text-shadow com pré-visualização ao vivo no texto.
-
Ajuste a camada 1
X, Y, desfoque, cor, opacidade.
-
Ative a camada 2
Para um contorno ou brilho.
-
Copie o CSS
Uma só propriedade, pronta a colar.
Anatomia da propriedade
| Parte | Exemplo | Função |
|---|---|---|
| Deslocam. X | 2px | Horizontal (negativo = esquerda) |
| Deslocam. Y | 2px | Vertical (negativo = cima) |
| Desfoque | 4px | Difusão da sombra |
| Cor | rgba(124, 58, 237, 0.5) | Matiz e opacidade |
Camada por defeito: text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5);. Pré-visualização e cálculo 100% locais.
Perguntas frequentes
Como funciona o text-shadow?
A propriedade recebe, por ordem: deslocamento horizontal X, deslocamento vertical Y, raio de desfoque e depois a cor. Exemplo: text-shadow: 2px 2px 4px rgba(124, 58, 237, 0.5). Valores negativos deslocam para a esquerda/cima.
Pode-se sobrepor várias sombras?
Sim, separadas por vírgulas. Esta ferramenta oferece duas camadas: a primeira desenha a sombra principal, a segunda (opcional) acrescenta um contorno ou brilho de outra cor.
Como criar um efeito de brilho (glow)?
Ponha X e Y a 0, aumente o desfoque e escolha uma cor viva com boa opacidade. A luz difunde-se uniformemente à volta do texto. Duplique a camada para intensificar.
A sombra prejudica a legibilidade?
Uma sombra muito forte pode atrapalhar. Para texto corrente, mantenha um desfoque ligeiro e opacidade moderada; reserve efeitos marcados para títulos grandes. A pré-visualização ajuda a julgar.