Gerador de Sombra CSS Box Shadow

Gerador gratuito online de sombra CSS com pré-visualização ao vivo. Ajuste deslocamento, desfoque, expansão, cor e opacidade facilmente.

Shadow List
4px
4px
10px
0px
50%
Generated CSS

Como funciona

  1. Abra o gerador e veja imediatamente uma pré-visualização em tempo real da sombra da caixa.
  2. Ajuste os controles deslizantes de deslocamento horizontal e vertical para posicionar a sombra.
  3. Defina o raio de desfoque e a expansão para controlar a suavidade e o tamanho da sombra.
  4. Escolha a cor e a opacidade da sombra conforme o seu design.
  5. Copie o código CSS gerado e cole-o diretamente na sua folha de estilos.

Exemplo

Entrada: Horizontal: 5px, Vertical: 10px, Desfoque: 15px, Expansão: 2px, Cor: #111111, Opacidade: 0.5
Resultado: box-shadow: 5px 10px 15px 2px rgba(17, 17, 17, 0.5);

FAQ

Sim, o CSS Box Shadow Generator é completamente gratuito e não requer registro ou conta.

Os seus dados estão completamente seguros. Todo o processamento acontece no lado do cliente, no seu navegador. Nenhum dado é enviado para qualquer servidor.

Sim, o CSS suporta múltiplos valores de box-shadow separados por vírgulas para criar efeitos de sombra em camadas.

Sim, a propriedade box-shadow é suportada por todos os navegadores modernos sem necessidade de prefixos de fornecedor.

Adicione a palavra-chave 'inset' ao valor de box-shadow para que a sombra seja aplicada no interior do elemento.