Gerador / Parser de Box Shadow CSS
Opções
Visualização ao vivo
Sobre o gerador / analisador de Box Shadow CSS
Esta ferramenta ajuda você a construir visualmente valores de box-shadow CSS e a analisar strings de box-shadow existentes.
É útil para design de interface, depuração de CSS, design systems e experimentação rápida com sombras.
Como usar a ferramenta
- Insira valores de offset, blur, spread, cor e inset para gerar uma sombra.
- Ou cole uma string de box-shadow existente no campo de entrada e clique em Analisar.
- Revise a visualização ao vivo.
- Copie o valor CSS gerado quando parecer correto.
Dicas
- Valores de desfoque maiores criam sombras mais suaves.
- A propagação negativa pode fazer com que as sombras pareçam mais estreitas.
- As sombras inseridas são úteis para elementos de interface do usuário pressionados ou recuados.
- As cores RGBA são ideais quando você deseja sombras suaves e transparentes.
Verificações de box-shadow antes de aplicar elevação
Sombras comunicam profundidade e foco, mas afetam contraste percebido, clipping, desempenho e consistência entre temas.
Defina a escala de elevação
Use poucos níveis deliberados em vez de valores únicos para cada card, botão, modal e estado hover.
Revise clipping e overflow
Inspecione sombras em scroll containers, pais arredondados, transforms, dialogs, sticky headers e bordas do viewport.
Teste temas claro e escuro
Ajuste opacidade, spread, blur e cor para sombras sutis no claro e visíveis sem névoa no escuro.
Meça superfícies grandes
Evite animar sombras caras em elementos grandes ou repetidos se transform, opacity ou pseudo-elementos bastarem.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.