A versão curta
- A propriedade CSS text-shadow recebe um deslocamento horizontal, um deslocamento vertical, um raio de desfocagem opcional e uma cor.
- Podes empilhar várias sombras num mesmo texto separando-as por vírgulas, e a primeira da lista é desenhada por cima.
- Ao contrário do box-shadow, o text-shadow não tem valor de spread nem a palavra-chave inset.
- As sombras com deslocamento duro e sem desfocagem são o estilo decorativo mais útil, de títulos retro a sombras longas.
- Uma sombra escura e suave é um remédio fraco para texto sobre uma imagem confusa; um scrim, uma imagem mais escura ou um fundo mais calmo resolvem o problema como deve ser.
Nesta página
Um CSS text-shadow escreve-se text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): um deslocamento horizontal, um deslocamento vertical, um raio de desfocagem opcional e uma cor. Separa várias sombras com vírgulas para as empilhar. É excelente para efeitos decorativos como títulos com deslocamento nítido, sombras longas e falsos contornos. É uma ferramenta fraca para tornar texto legível sobre uma fotografia confusa, 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 sombra à caixa do elemento e não às letras.A sombra é pintada atrás do texto e toma a forma de cada glifo, incluindo sublinhados e decorações. Não altera o layout: um deslocamento grande pode sair do elemento e sobrepor-se aos vizinhos sem os empurrar, por isso deixa espaço com padding se a sombra for grande.
Exemplos de text-shadow que vale a pena copiar
Os estilos que aguentam são os de aresta dura. Uma sombra sem desfocagem lê-se como uma escolha gráfica deliberada; uma desfocagem cinzenta suave sob texto corrido tende a ler-se como 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); }Os deslocamentos retro e as sombras longas estão tratados visualmente em efeitos de texto retro e efeitos de texto 3D. Para um contorno limpo, prefere -webkit-text-stroke com paint-order: stroke fill ao velho truque de quatro sombras em cada canto, que deixa falhas nas curvas; texto com contorno mostra ambos.
Porque é que uma sombra suave corrige mal a legibilidade
O uso comum do text-shadow é uma desfocagem escura atrás de texto branco sobre uma fotografia, na esperança de separar os dois. Ajuda um pouco nas arestas de cada letra e não faz nada pelo espaço lá dentro, onde a fotografia continua a ver-se com toda a força. Sobe a desfocagem e a opacidade até funcionar e ficas com uma mancha à volta de cada palavra. Os brilhos à volta do texto, claros ou escuros, parecem datados e continuam a falhar nas zonas mais claras da imagem.
As ferramentas de contraste também ignoram as sombras. Medem a cor do texto contra a cor do fundo, por isso um título que só passa graças à sombra será assinalado numa auditoria, e com razão. Os limiares estão em contraste de cor e acessibilidade.
A sombra como muleta
- Halo preto desfocado atrás de texto branco
- Falha onde a imagem é mais clara
- As ferramentas de contraste continuam a dar falha
- Arestas sujas em texto pequeno
Corrige o fundo
- Um scrim em gradiente sob as palavras
- Escurece ou dessatura a imagem
- Passa o texto para a zona mais calma
- Escolhe um fundo feito para levar palavras
Melhores opções para texto sobre imagens e gradientes
Um scrim é um gradiente que escurece só a parte da imagem atrás do texto e se esbate até ao nada no resto. Mantém a fotografia luminosa onde interessa e dá a cada letra o mesmo chão calmo. Sobreposições de gradiente em CSS trata das camadas por completo.
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 fiáveis: passar a imagem por filter: brightness(0.75) numa camada própria, recortar para as palavras caírem em céu ou parede e não em detalhe, ou pôr o texto numa faixa sólida. Texto sobre imagens percorre cada uma com exemplos.
Palavras claras sobre a zona mais clara do fundo. Uma sombra só desfocava o problema.
Em vez disso, o fundo aprofunda-se atrás da linha, e as palavras lêem-se sem qualquer efeito aplicado.
É exatamente o trabalho que os Marks do Gradiently fazem sozinhos: a zona mais calma move-se para trás das tuas palavras e o Tinta automática escolhe texto claro ou escuro linha a linha, sem sombra, caixa ou desfocagem. Quando queres a sombra como decoração e não como reparação, os tratamentos de lettering como Extrusão, Duplo e Rasto dão-te estilos com deslocamento sem escreveres uma única sombra.
Text-shadow em texto com gradiente
O texto com gradiente faz-se com background-clip: text e uma cor de texto transparente. Acrescenta-lhe um text-shadow e a sombra aparece diretamente através das letras transparentes, sujando o gradiente por dentro. A solução é fazer sombra ao elemento: filter: drop-shadow(3px 3px 0 #1e1b4b) segue a forma pintada das letras e fica por trás delas. A técnica em si está em texto com gradiente em CSS.
Desempenho e animação
As sombras duras são baratas. Raios de desfocagem grandes em passagens longas de texto custam mais a pintar, e animar text-shadow repinta o texto a cada fotograma. Se queres animar um título, move-o com transform e mantém 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 acrescentar mais do que uma sombra de texto?
Sim. Separa as sombras com vírgulas. A primeira da lista é pintada por cima das outras.
O text-shadow tem valor de spread?
Não. O spread e o inset existem só no box-shadow. Para engrossar uma sombra de texto, empilha várias sombras com pequenos deslocamentos.
O text-shadow melhora a acessibilidade?
Não de forma fiável. As verificações de contraste ignoram as sombras, por isso o texto tem de atingir o contraste exigido contra o fundo sem uma.
Como torno texto branco legível numa fotografia sem text-shadow?
Põe um scrim de gradiente escuro atrás da zona do texto, escurece a imagem ou coloca as palavras sobre uma parte calma da fotografia.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil