Gerador de Box Shadow CSS

Gere visualmente propriedades CSS box-shadow com controles deslizantes. Veja uma pré-visualização em tempo real e copie o código CSS gerado.

Estúdio · ambiente neutro

X0px

Y8px

Desfoque24px

Expansão-6px

Opacidade14%

Cor

CSS

Funcionalidades

Controlo por deslizadores

Seletor de cor

Alternar sombra interior

Várias camadas

Pré-visualização em direto e código CSS

Como Usar

1. Modele a sombra com os controles — o cartão neutro na superfície mostra exatamente o resultado final.

2. Sombras reais têm camadas: adicione até quatro ou comece por uma predefinição (Suave, Elevada, Flutuante, Interna).

3. Alterne a superfície para conferir a sombra sobre branco, cinza e escuro, e copie o CSS.

Sobre esta ferramenta

Sombras convincentes em interfaces costumam ter mais de uma camada: uma sombra justa e mais escura para o contato e outra ampla e suave para a distância. Este gerador permite empilhar até quatro camadas de box-shadow, ajustando em cada uma o deslocamento horizontal e vertical, o desfoque, a expansão, a cor, a opacidade e o modo interno, enquanto um card neutro no palco mostra o resultado exato. As predefinições dão pontos de partida — Suave, Elevada, Flutuante e Interna — e você pode alternar o palco entre superfícies brancas, cinzas e escuras para conferir se a sombra continua legível em cada uma. O CSS gerado lista as camadas na ordem correta com cores rgba, pronto para colar numa folha de estilos ou num arquivo de design tokens.

Perguntas Frequentes

O que significam deslocamento, desfoque e expansão?

Os deslocamentos X e Y movem a sombra para a direita e para baixo (valores negativos movem para a esquerda e para cima). O desfoque suaviza a borda; quanto maior, mais difusa. A expansão aumenta ou diminui a sombra antes do desfoque, então uma expansão negativa mantém uma sombra suave recolhida sob o elemento.

Por que usar várias camadas de sombra?

Objetos reais projetam uma sombra nítida perto da superfície e outra mais suave mais longe. Combinar uma camada pequena e escura com uma grande e fraca parece mais natural que uma única sombra pesada, e é assim que a maioria dos design systems define elevação.

O que o inset faz?

Uma sombra inset é desenhada dentro da borda do elemento, e não fora, o que dá a impressão de algo afundado. É muito usada em campos de entrada, áreas rebaixadas e botões de alternância.

Sombras prejudicam o desempenho?

Sombras estáticas custam pouco. Animar box-shadow em muitos elementos pode causar repinturas, então, para efeitos de hover, considere animar a opacidade de um pseudoelemento que já tenha a sombra, ou mantenha valores moderados de desfoque.

Por que minha sombra fica diferente num fundo escuro?

Sombras escuras perdem contraste sobre superfícies escuras. Designs com tema escuro costumam reduzir a opacidade das sombras e recorrer a superfícies mais claras ou bordas sutis para mostrar elevação.