Cores e design
Gerador de box-shadow
A sombra perfeita com cursores, o código CSS num clique.
Uma sombra bem afinada dá relevo a um cartão, destaca um botão do fundo e hierarquiza uma interface — mas escrever um valor box-shadow à mão é adivinhação. Aqui, tudo se ajusta com cursores: deslocamento horizontal e vertical, raio de desfoque, expansão, opacidade da sombra, e uma caixa para passar a sombra interna (inset). A pré-visualização — um cartão sobre fundo neutro — reflete cada ajuste em direto, exatamente como o seu navegador o irá apresentar. Quando o resultado convencer, copie a declaração CSS completa num clique e cole-a na sua folha de estilos ou no seu design system. Grátis, sem registo, inteiramente no seu navegador.
Como funciona?
- Regule os deslocamentos horizontal (X) e vertical (Y).
- Ajuste o desfoque, a expansão e a opacidade da sombra.
- Ative «inset» se quiser uma sombra interna.
- Copie o código CSS gerado num clique.
Perguntas frequentes
Como obter uma sombra natural e discreta?
Deslocamento vertical ligeiro (2 a 8 px), deslocamento horizontal nulo ou pequeno, desfoque generoso (duas a três vezes o deslocamento), opacidade baixa (8 a 20%). A luz vem de cima: a sombra cai para baixo.
Para que serve o parâmetro «expansão» (spread)?
Aumenta (valor positivo) ou contrai (valor negativo) a sombra antes de aplicar o desfoque. Uma expansão negativa cria sombras cerradas muito elegantes; uma expansão positiva com desfoque nulo desenha um contorno sólido.
Quando usar uma sombra interna (inset)?
Para dar um efeito de rebaixo: campos de introdução, botões premidos, painéis afundados. A sombra é desenhada no interior do elemento em vez de se projetar atrás dele.
As sombras prejudicam o desempenho?
Uma box-shadow estática é muito bem otimizada pelos navegadores. Evite apenas animar o desfoque em contínuo em grandes superfícies — para transições, anime antes a opacidade de um pseudoelemento portador da sombra.