Gerador de CSS Box Shadow
Camadas de sombra
É necessária pelo menos uma camada.
Saída CSS
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);Ferramentas externas relacionadas
Alguns links são links de afiliados.
Ferramentas relacionadas
Crie uma CSS box-shadow de forma visual e copie o código com um clique. Arraste os controles para ajustar o deslocamento, o desfoque, o espalhamento, a cor e a opacidade enquanto a pré-visualização atualiza instantaneamente. Empilhe várias camadas de sombra, converta qualquer camada em sombra interna (inset) e comece a partir de presets prontos. Tudo funciona no seu navegador — nenhum dado é enviado.
Como usar
- Mova os controles de Deslocamento X/Y, Desfoque e Espalhamento enquanto observa a pré-visualização ao vivo.
- Escolha a cor da sombra e ajuste a opacidade.
- Adicione mais camadas para profundidade ou converta uma camada em sombra interna (inset).
- Copie o CSS da box-shadow ou mude para a aba Tailwind para obter um valor utilitário.
Entendendo as propriedades do box-shadow
Uma CSS box-shadow é escrita como: deslocamento X, deslocamento Y, desfoque, espalhamento, cor — com a palavra-chave inset opcional. Você pode listar várias sombras separadas por vírgulas.
Deslocamento X & Y
O deslocamento X move a sombra horizontalmente, o Y verticalmente. Valores positivos empurram a sombra para a direita e para baixo; valores negativos, para a esquerda e para cima.
Raio de desfoque
O desfoque suaviza as bordas da sombra. Com 0 você obtém uma borda nítida; valores maiores criam uma sombra difusa e suave. Não pode ser negativo.
Raio de espalhamento
O espalhamento aumenta (positivo) ou reduz (negativo) a sombra antes de aplicar o desfoque. Um valor ligeiramente negativo é útil para sombras sutis e ajustadas.
Inset (sombra interna)
A palavra-chave inset desenha a sombra dentro do elemento em vez de fora, ideal para botões pressionados, campos de formulário e efeitos de profundidade interna.
Cor e opacidade
As sombras geralmente ficam mais naturais com uma cor escura semitransparente em vez de preto sólido. Reduza a opacidade para um efeito mais realista.
Recursos
Múltiplas camadas de sombra
Empilhe várias sombras em um único elemento. Combinar uma sombra escura e ajustada com uma mais ampla e suave é o segredo para criar profundidade realista e refinada.
Sombras internas
Ative qualquer camada como sombra interna para criar efeitos de pressão, entalhe ou afundamento — perfeito para botões e campos de formulário.
Presets prontos
Comece com elevações do Material, sombras suaves ou duras, neumorphism ou um brilho colorido e ajuste ao seu gosto.
Pré-visualização clara e escura
Alterne o fundo da pré-visualização entre claro e escuro para verificar como a sombra aparece em diferentes superfícies.
Copiar com um clique (CSS ou Tailwind)
Copie uma declaração box-shadow pronta para colar ou obtenha um valor arbitrário Tailwind como shadow-[…] para projetos utility-first.
Casos de uso comuns
Cartões e contêineres
Dê aos cartões uma leve elevação com uma sombra suave e de baixa opacidade para que o conteúdo pareça agrupado e destacado.
Botões e estados hover
Adicione uma sombra sutil aos botões, uma maior ao passar o cursor ou uma sombra interna para simular o efeito de pressão.
Neumorphism
Combine uma sombra clara e uma escura em lados opostos para obter o visual neumórfico suave e extrudado.
Brilho e anéis de foco
Use uma sombra colorida com deslocamento zero e algum espalhamento para criar um efeito de brilho ou um realce de foco acessível.
Notas e dicas
- Muitas sombras grandes e desfocadas podem afetar o desempenho de renderização — use-as com moderação em elementos animados ou com rolagem.
- Valores de desfoque muito grandes são os mais custosos de renderizar; prefira empilhar sombras menores para maior realismo.
- Mantenha contraste suficiente para que as sombras sejam sutis e não prejudiquem a legibilidade.
- Sombras inset são desenhadas dentro do elemento e não ultrapassam sua caixa de borda.
Perguntas frequentes
- Qual é a diferença entre box-shadow e filter: drop-shadow?
- box-shadow segue a caixa de borda retangular do elemento (respeitando border-radius), enquanto drop-shadow segue a forma real, incluindo PNGs transparentes e formas irregulares. Esta ferramenta gera box-shadow.
- Posso adicionar várias sombras a um elemento?
- Sim. O CSS permite listar várias sombras separadas por vírgulas, e este gerador permite empilhar múltiplas camadas. Combinar sombras é a chave para uma profundidade realista.
- O que é uma sombra inset?
- Uma sombra inset é desenhada dentro do elemento em vez de fora. É útil para botões pressionados, campos de formulário e superfícies côncavas. Ative a opção Inset em qualquer camada.
- As box-shadows deixam minha página mais lenta?
- Algumas sombras estáticas não são problema. Sombras grandes e muito desfocadas têm maior custo de renderização, então use-as com cuidado em elementos animados ou frequentemente redesenhados.
- Meus dados são enviados para algum servidor?
- Não. O gerador funciona inteiramente no seu navegador. Nada é enviado a um servidor e não é necessário cadastro.