CSS Box Shadow Generator
Crie sombras CSS multi-camadas visualmente com visualização ao vivo. Ajuste deslocamentos, desfoque, expansão, cor e opacidade — e copie o valor CSS pronto para usar.
CSS Box Shadow Generator
Visualização ao Vivo
Saída CSS
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);O que é box-shadow CSS?
A propriedade CSS box-shadow adiciona um ou mais efeitos de sombra ao quadro de um elemento. Cada sombra é definida por seu deslocamento horizontal e vertical, raio de desfoque, raio de expansão, cor e uma palavra-chave inset opcional que move a sombra para dentro do elemento.
Sombras multi-camadas
Você pode empilhar várias camadas de sombra para criar efeitos de profundidade, efeitos de brilho ou bordas simuladas. As camadas são renderizadas de trás para frente, portanto a primeira sombra na lista aparece no topo.
Como usar
- Clique em 'Adicionar Sombra' para criar uma camada de sombra.
- Ajuste os controles deslizantes de deslocamento, desfoque, expansão, cor e opacidade.
- Alterne 'Inset' para criar uma sombra interna.
- Adicione mais camadas para construir efeitos complexos.
- Copie o valor ou declaração completa para sua área de transferência.
Seus dados permanecem no seu navegador — nenhum dado é enviado para nenhum servidor.
Perguntas Frequentes
- Qual é a diferença entre desfoque e expansão?
- O raio de desfoque controla o quão suave são as bordas da sombra — um valor mais alto cria uma sombra mais difusa. O raio de expansão expande ou encolhe o tamanho da sombra além da caixa delimitadora do elemento, sem afetar a suavidade.
- O que faz a palavra-chave inset?
- Inset move a sombra para dentro do elemento em vez de para fora. Isso é útil para criar efeitos de UI pressionada ou recuada.
- Posso usar várias sombras?
- Sim. O box-shadow CSS aceita uma lista separada por vírgulas de definições de sombra. Cada camada é independente e são compostas de trás para frente.
- O resultado é compatível entre navegadores?
- A propriedade box-shadow é totalmente suportada em todos os navegadores modernos sem prefixos de fornecedor. Nenhum prefixo -webkit- ou -moz- é necessário.