Gerador de sombra CSS (box-shadow) com prévia em cards | We.Inc
Crie sombras CSS em camadas e veja o resultado em cards reais de serviço e de preços, em fundos claros e escuros, com um estado de foco visível. Copie o CSS e um componente de card pronto.
É difícil avaliar uma sombra em um quadrado cinza. Aqui você ajusta um box-shadow em camadas e vê o resultado em um card de serviço e um card de preços, em uma página clara ou escura, com um anel de foco que você pode testar com Tab. Copie o CSS ou o componente de card inteiro quando estiver bom. Tudo roda no seu navegador. Nada do que você digita vai para a We.Inc ou para qualquer outra pessoa, e tudo some quando você fecha a aba.
Comece por um preset ou ajuste a primeira camada: deslocamento horizontal e vertical, desfoque, expansão, cor, opacidade e inset.
Adicione até cinco camadas. Sombras em camadas (uma bem próxima e outra larga e suave) parecem mais naturais que uma única sombra grande.
Alterne a prévia entre página clara e escura. Pressione Tab para levar o foco aos botões do card e confira se o anel de foco continua visível.
As verificações avisam quando a sombra está fraca demais para ser vista no fundo escolhido e quando o texto do card fica abaixo do contraste WCAG AA.
Copie a declaração box-shadow ou o componente de card completo com HTML e CSS.
Em fundos escuros, as sombras quase desaparecem. Use uma cor de card um pouco mais clara ou uma borda fina para separar o card.
Deixe a cor da sombra puxada para a cor do fundo, em vez de preto puro, para um visual mais suave.
Nunca dependa só de uma sombra para indicar o foco. Use também um contorno bem visível.
Valores grandes de desfoque custam mais para desenhar. Evite animá-los em listas longas.
Use um ou dois níveis de sombra no site inteiro, para que a profundidade tenha significado.
Perguntas frequentes
Como funciona a propriedade CSS box-shadow?
O box-shadow recebe um deslocamento horizontal, um deslocamento vertical, um raio de desfoque opcional, uma expansão opcional e uma cor, além da palavra-chave inset para sombras internas. Você pode listar várias sombras separadas por vírgulas; a primeira é desenhada por cima.
Por que sombras em camadas ficam melhores?
Objetos reais projetam uma sombra nítida perto deles e outra suave e larga mais longe. Duas ou três camadas com desfoque crescente e opacidade decrescente imitam isso.
Por que minha sombra fica invisível em um fundo escuro?
Uma sombra escura em uma página escura quase não tem contraste. A ferramenta avisa sobre isso. Destaque o card com uma cor de superfície mais clara ou uma borda sutil.
O box-shadow afeta a acessibilidade?
Sombras são decoração, então elas mesmas não precisam seguir regras de contraste. O que importa é que o texto do card continue legível e que o foco seja mostrado com um contorno visível, não só com uma mudança de sombra.
O gerador de sombra CSS é grátis?
Sim, sem cadastro. Copie o código para qualquer projeto.
Teste as sombras nos componentes que você vai publicar
Uma sombra que fica boa em um quadrado isolado pode ficar pesada em uma fileira de cards de preços ou sumir sobre uma foto. Ver a prévia nos cards que um site de pequena empresa realmente usa, um card de serviço com ícone e um plano de preços em destaque, mostra o resultado que você vai ter.
O código do componente inclui um contorno focus-visible, então o card continua utilizável pelo teclado seja qual for a sombra escolhida.