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.

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