Htmly
Design & Assets

Gerador de Box Shadow CSS

Crie sombras CSS com sliders interativos. Ajuste offset, blur, spread e cor com preview ao vivo.

1 usos
Presets
Camadas de sombra
5px
5px
15px
0px
20%
Preview

Exemplo de card

Veja a sombra aplicada

CSS gerado
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.20);

Como usar o Gerador de Box Shadow CSS

  1. 1

    Ajuste os sliders

    Configure o deslocamento horizontal/vertical, desfoque, expansão e cor da sombra usando os controles deslizantes. Adicione múltiplas camadas de sombra para efeitos mais complexos.

  2. 2

    Veja o preview em tempo real

    Acompanhe o resultado na caixa de preview que atualiza automaticamente conforme você ajusta os parâmetros. Use os presets para começar rapidamente.

  3. 3

    Copie o CSS gerado

    Clique no botão "Copiar" para copiar o código CSS pronto para usar no seu projeto. Cole diretamente no seu arquivo de estilos.

O que é box-shadow no CSS?

A propriedade box-shadow do CSS permite adicionar sombras ao redor de elementos HTML, criando profundidade e hierarquia visual no design. É uma das propriedades mais usadas no design moderno para criar interfaces com aparência profissional.

Uma sombra CSS é definida por valores de deslocamento horizontal e vertical, raio de desfoque, raio de expansão e cor. O deslocamento controla a posição da sombra, o desfoque suaviza as bordas, e a expansão aumenta ou diminui o tamanho da sombra. Você também pode usar a palavra-chave "inset" para criar sombras internas.

O CSS permite empilhar múltiplas sombras no mesmo elemento, separadas por vírgula. Isso possibilita efeitos complexos como sombras realistas com várias camadas, brilhos neon e efeitos de profundidade. O gerador do Htmly facilita a criação dessas sombras com controles visuais e preview ao vivo, sem precisar escrever código manualmente.

Perguntas frequentes

O gerador de box-shadow é grátis?
Sim, a ferramenta é 100% gratuita, sem limite de uso e sem necessidade de cadastro. Você pode gerar quantas sombras quiser.
Posso adicionar mais de uma sombra no mesmo elemento?
Sim. Clique em "Adicionar sombra" para criar camadas adicionais. O CSS permite múltiplas sombras separadas por vírgula, e o gerador combina todas automaticamente.
O que significa a opção "inset"?
A opção "inset" cria uma sombra interna, ou seja, a sombra aparece dentro do elemento em vez de fora. É útil para criar efeitos de profundidade, campos de entrada estilizados e brilhos internos.
O CSS gerado funciona em todos os navegadores?
Sim. A propriedade box-shadow é suportada por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Não são necessários prefixos de fabricante.

Publique seu site HTML em 30 segundos

Publicar agora