DevTulz Online

Gerador CSS Box Shadow

Fundo

O que é o CSS Box Shadow?

A propriedade CSS box-shadow adiciona efeitos de sombra ao redor do quadro de um elemento. As sombras podem ser deslocadas, desfocadas, expandidas, coloridas e definidas como inset (sombra interior). Várias sombras separadas por vírgulas podem ser sobrepostas para efeitos ricos. Este gerador permite construir sombras complexas de múltiplas camadas visualmente e copiar o CSS pronto para colar na área de transferência.

Como usar o Gerador de Box Shadow

  1. Ajuste os controles deslizantes para Offset X/Y, Blur e Spread para posicionar e dar forma à sombra.

  2. Clique na amostra de cor para escolher uma cor de sombra e use o controle deslizante Opacity para transparência.

  3. Ative 'Inset' para criar um brilho interior ou efeito pressionado.

  4. Clique em '+ Adicionar camada' para empilhar várias sombras.

  5. Copie o CSS gerado e cole-o na sua folha de estilos.

Perguntas Frequentes

Qual é a diferença entre box-shadow e o filtro drop-shadow? box-shadow adiciona sombras ao redor da caixa de borda retangular do elemento e suporta sombras internas. O filtro CSS: drop-shadow() se aplica à forma visual do elemento (incluindo transparência), fazendo-o seguir contornos não retangulares como PNGs com fundos transparentes.

Como criar um efeito de elevação de cartão Material Design? Empilhe duas sombras de caixa: uma sombra ambiente suave (borrão grande, baixa opacidade, ligeiramente espalhada) e uma sombra-chave (borrão menor, opacidade mais alta, deslocamento direcional). Por exemplo: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

O box-shadow afeta o layout da página? Não. box-shadow não afeta o tamanho ou a posição do elemento no fluxo do documento. Diferentemente de outline, não ocupa espaço de layout e não movimentará outros elementos.

Posso animar box-shadow? Sim. box-shadow é animável com transições e animações CSS. Para melhor desempenho, prefira fazer transições de box-shadow apenas quando necessário — os navegadores não conseguem acelerar as mudanças de box-shadow na GPU tão eficientemente quanto transform ou opacity.

Keywords: gerador CSS box shadow, box-shadow CSS, ferramenta de sombra CSS, CSS drop shadow, sombra interior, sombra multicamada, CSS shadow online