Gerador de Box Shadow CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.20); Esta ferramenta processa os dados localmente no seu navegador. Nenhum dado é enviado para servidores externos.
O que é Box Shadow no CSS?
A propriedade box-shadow do CSS permite adicionar sombras ao redor de elementos HTML, criando efeitos de profundidade, elevação e destaque visual. Introduzida no CSS3, é amplamente suportada por todos os navegadores modernos e se tornou essencial no design de interfaces modernas.
Sintaxe da propriedade
A sintaxe completa do box-shadow segue o formato: box-shadow: [inset] offset-x offset-y blur spread cor;
- offset-x — Deslocamento horizontal. Valores positivos movem a sombra para a direita, negativos para a esquerda.
- offset-y — Deslocamento vertical. Valores positivos movem a sombra para baixo, negativos para cima.
- blur — Raio de desfoque. Quanto maior, mais difusa e suave a sombra. Valor 0 produz uma sombra sólida.
- spread — Expansão da sombra. Valores positivos expandem, negativos contraem.
- cor — Cor da sombra, geralmente em formato
rgba()para controlar a opacidade. - inset — Palavra-chave opcional que projeta a sombra para dentro do elemento.
Casos de uso comuns
Box shadows são usados em diversos contextos no design web:
- Cards e painéis — Sombras sutis que criam a sensação de elevação e separação do fundo.
- Botões e CTAs — Efeito de profundidade que indica interatividade ao usuário.
- Modais e dropdowns — Sombras mais pronunciadas que destacam o elemento sobreposto.
- Inputs com foco — Glow suave ao redor de campos de formulário quando selecionados.
- Efeito neumorfismo — Combinação de múltiplas sombras (clara e escura) para aparência 3D.
Boas práticas
Use opacidades baixas (10-25%) para sombras mais naturais. Prefira cores neutras ou derivadas da cor de fundo. Evite valores excessivos de blur em animações — para performance, anime transform ou opacity em vez de box-shadow diretamente. Múltiplas sombras leves costumam produzir resultados mais realistas do que uma única sombra forte.
Perguntas Frequentes
box-shadow é uma propriedade CSS que adiciona sombras ao redor de um elemento HTML. Ela aceita valores para deslocamento horizontal (offset-x), deslocamento vertical (offset-y), desfoque (blur), expansão (spread), cor e a opção inset para sombra interna.
Sim. O CSS permite declarar múltiplas sombras separadas por vírgula na propriedade box-shadow. Cada sombra é renderizada na ordem em que aparece, com a primeira sendo desenhada por cima das demais. Esta ferramenta permite adicionar até 10 camadas.
A sombra normal é projetada para fora do elemento, criando um efeito de elevação. A sombra inset é projetada para dentro do elemento, criando um efeito de profundidade ou de pressionamento. Basta adicionar a palavra-chave inset antes dos valores.
Sombras simples têm impacto mínimo na performance. Porém, sombras com valores grandes de blur (acima de 50px) ou muitas camadas sobrepostas podem exigir mais processamento de GPU, especialmente em animações. Para melhor performance, use valores moderados e evite animar a propriedade box-shadow — prefira animar opacity ou transform.
Sim. A propriedade box-shadow pode ser aplicada a qualquer elemento HTML com modelo de caixa (box model). Isso inclui divs, botões, imagens, inputs, cards e praticamente qualquer elemento visível. A sombra acompanha o formato do border-radius do elemento.
A opacidade é controlada pelo canal alfa da cor (formato rgba). Um valor de 0% torna a sombra totalmente transparente, enquanto 100% a torna totalmente opaca. Valores entre 10% e 30% são os mais usados para sombras sutis e naturais.
Não. Todo o processamento é feito localmente no seu navegador usando JavaScript. Nenhum dado é enviado para servidores externos. O código CSS é gerado em tempo real à medida que você ajusta os controles.