Gerador de Box Shadow CSS
Crie sombras suaves e modernas para seus projetos web. Ajuste os parâmetros e copie o código CSS pronto.
Configurações
CSS Code
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);Dica Pro
Sombras mais suaves geralmente usam um valor de Blur alto e uma Opacidade baixa. Tente usar múltiplas camadas de sombra para um efeito ainda mais realista (em breve nesta ferramenta).
O que é Box Shadow CSS?
A propriedade box-shadow do CSS permite adicionar efeitos de sombra a elementos HTML. É uma das ferramentas mais poderosas para criar profundidade e hierarquia visual em interfaces web modernas. Com ela, você pode simular elevação, criar efeitos de brilho ou simplesmente destacar um elemento do fundo.
Nosso Gerador de Box Shadow facilita a criação desses efeitos visualmente, gerando o código CSS automaticamente para você copiar e colar no seu projeto.
Como usar o Gerador de Sombra CSS?
- Ajuste a Posição: Use os controles "Horizontal" e "Vertical" para mover a sombra.
- Defina o Desfoque: O controle "Blur" determina o quão nítida ou difusa a sombra será.
- Controle o Tamanho: O "Spread" aumenta ou diminui o tamanho da sombra em relação ao elemento.
- Escolha as Cores: Selecione a cor da sombra e ajuste sua opacidade para um efeito natural.
- Copie o Código: Clique no botão "Copiar" e cole no seu arquivo CSS.
Perguntas Frequentes (FAQ)
O que é "Inset"?
A opção "Inset" muda a sombra para dentro do elemento, criando um efeito de profundidade ou baixo relevo, como se o elemento estivesse "afundado" na página.
Por que usar rgba para cores de sombra?
O formato RGBA permite definir a transparência (canal Alpha) da cor. Isso é crucial para sombras, pois sombras naturais não são sólidas; elas permitem ver um pouco do fundo através delas.
Funciona em todos os navegadores?
Sim! A propriedade box-shadow é suportada por todos os navegadores modernos. Nosso gerador também fornece os prefixos -webkit- e -moz- para garantir compatibilidade com versões muito antigas.
Como fazer sombras realistas?
Para sombras realistas (estilo Material Design), use um desfoque (blur) maior que o deslocamento vertical, e mantenha a opacidade baixa (entre 0.1 e 0.3). Evite sombras pretas puras; use tons escuros da cor do elemento ou do fundo.