Resumindo
- A propriedade text-shadow do CSS recebe um deslocamento horizontal, um deslocamento vertical, um raio de desfoque opcional e uma cor.
- Várias sombras podem ser empilhadas no mesmo texto separando-as por vírgulas, e a primeira da lista é desenhada por cima.
- Ao contrário de box-shadow, text-shadow não tem valor de spread nem a palavra-chave inset.
- Sombras deslocadas e secas, sem desfoque, são o estilo decorativo mais útil, de títulos retrô a sombras longas.
- Uma sombra escura e suave é uma correção fraca para texto sobre uma imagem agitada; um scrim, uma imagem mais escura ou um fundo mais calmo resolvem de verdade.
Nesta página
Um text shadow em CSS se escreve text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): um deslocamento horizontal, um deslocamento vertical, um raio de desfoque opcional e uma cor. Separe várias sombras por vírgulas para empilhá-las. É excelente para efeitos decorativos, como títulos com deslocamento nítido, sombras longas e contornos falsos. É uma ferramenta ruim para deixar texto legível sobre uma foto agitada, e as melhores opções para isso estão mais abaixo.
Sintaxe do text-shadow
/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }
/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }
/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }
/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }
/* Remove an inherited shadow */
h1 { text-shadow: none; }Obrigatória
O que faz
Obrigatória
O que faz
Obrigatória
O que faz
O que faz
currentcolorinset. Esses pertencem ao box-shadow, que faz a sombra da caixa do elemento, não das letras.A sombra é pintada atrás do texto e assume a forma de cada glifo, incluindo sublinhados e decorações. Ela não altera o layout: um deslocamento grande pode transbordar do elemento e se sobrepor aos vizinhos sem empurrá-los, então deixe espaço com padding se a sombra for grande.
Exemplos de text shadow que valem a cópia
Os estilos que se sustentam são os de borda seca. Uma sombra sem desfoque parece uma escolha gráfica deliberada; um desfoque cinza suave sob o texto corrido tende a parecer um erro.
/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }
/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }
/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }
/* 4. Long shadow: many 1px steps */
.long {
color: #fef3c7;
text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
7px 7px 0 #b45309, 8px 8px 0 #b45309;
}
/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }Deslocamentos retrô e sombras longas aparecem visualmente em efeitos de texto retrô e efeitos de texto 3D. Para um contorno limpo, prefira -webkit-text-stroke com paint-order: stroke fill ao velho truque de quatro sombras, uma em cada canto, que deixa falhas nas curvas; texto com contorno mostra os dois.
Por que uma sombra suave corrige mal a legibilidade
O uso mais comum de text-shadow é um desfoque escuro atrás de texto branco sobre uma foto, na esperança de separar os dois. Ajuda um pouco nas bordas de cada letra e não faz nada no espaço dentro delas, onde a foto continua aparecendo com toda a força. Aumente o desfoque e a opacidade até funcionar e você ganha uma mancha em volta de cada palavra. Brilhos em volta do texto, claros ou escuros, parecem datados e ainda falham nas partes mais claras da imagem.
Os verificadores de contraste também ignoram sombras. Eles medem a cor do texto contra a cor do fundo, então um título que só passa graças à sombra vai ser apontado numa auditoria, e com razão. Os limites estão em contraste de cor e acessibilidade.
Sombra como muleta
- Halo preto desfocado atrás de texto branco
- Falha onde a imagem é mais clara
- Ferramentas de contraste continuam acusando falha
- Bordas turvas em texto pequeno
Corrija o fundo
- Um scrim em gradiente sob as palavras
- Escurecer ou dessaturar a imagem
- Levar o texto para a área mais calma
- Escolher um fundo feito para receber palavras
Opções melhores para texto sobre imagens e gradientes
Um scrim é um gradiente que escurece só a parte da imagem atrás do texto e some no resto. Ele mantém a foto luminosa onde importa e dá a cada letra o mesmo fundo calmo. Overlays de gradiente em CSS explica as camadas em detalhe.
linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%).card {
background-image:
linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
url("/images/harbour.jpg");
background-size: cover;
background-position: center;
color: #f8fafc;
}Outras opções confiáveis: passar a imagem por filter: brightness(0.75) numa camada própria, recortar para que as palavras caiam sobre céu ou parede e não sobre detalhes, ou colocar o texto numa faixa sólida. Texto sobre imagens mostra cada uma com exemplos.
Palavras claras sobre a parte mais clara do fundo. Uma sombra só borraria o problema.
Em vez disso, o fundo se aprofunda atrás da linha, e as palavras se leem sem nenhum efeito sobre elas.
É exatamente o trabalho que os Marks do Gradiently fazem sozinhos: a região mais calma se move para trás das suas palavras e a Tinta automática escolhe letra clara ou escura linha por linha, sem sombra, caixa ou desfoque. Quando você quer sombra como decoração e não como conserto, tratamentos de letras como Extrusão, Duplo e Rastro dão estilos deslocados sem escrever uma única sombra.
Text shadow em texto com gradiente
Texto com gradiente é feito com background-clip: text e uma cor de texto transparente. Acrescente um text-shadow e a sombra aparece direto através das letras transparentes, turvando o gradiente por dentro. A solução é fazer a sombra do elemento: filter: drop-shadow(3px 3px 0 #1e1b4b) segue a forma pintada das letras e fica atrás delas. A técnica em si está em texto com gradiente em CSS.
Desempenho e animação
Sombras secas são baratas. Raios de desfoque grandes em trechos longos de texto custam mais para pintar, e animar text-shadow repinta o texto a cada quadro. Se quiser animar um título, mova-o com transform e mantenha a sombra fixa.
Perguntas frequentes
Qual é a sintaxe do text-shadow em CSS?
text-shadow: offset-x offset-y blur-radius color, por exemplo 2px 2px 4px #000. Só os dois deslocamentos são obrigatórios.
Posso usar mais de uma sombra no texto?
Sim. Separe as sombras por vírgulas. A primeira da lista é pintada por cima das outras.
O text-shadow tem valor de spread?
Não. Spread e inset só existem no box-shadow. Para engrossar uma sombra de texto, empilhe várias sombras com pequenos deslocamentos.
O text-shadow melhora a acessibilidade?
Não de forma confiável. As verificações de contraste ignoram sombras, então o texto precisa atingir o contraste exigido contra o fundo sem ela.
Como deixo texto branco legível sobre uma foto sem text-shadow?
Coloque um scrim escuro em gradiente atrás da área do texto, escureça a imagem ou posicione as palavras sobre uma parte calma da foto.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil