Developer Tools
Web Utilities
Image ToolsGerador de Box Shadow CSS
Crie visualmente efeitos CSS box-shadow com múltiplas camadas e visualização em tempo real. Personalize desfoque, espalhamento, cor e opacidade.
Configurações de Sombra
Camada 1
Visualização e Código CSS
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)Ferramentas Relacionadas
Sobre Esta Ferramenta
Como Funciona
- Crie visualmente efeitos CSS box-shadow com múltiplas camadas
- Ajuste o deslocamento horizontal e vertical para posicionamento
- Controle o raio de desfoque e espalhamento para suavidade e tamanho
- Personalize cores de sombra com controle de opacidade
- Adicione sombras inset para efeitos de brilho interno
- Sobreponha múltiplas sombras para efeitos de profundidade complexos
Casos de Uso Comuns
- Criar profundidade e elevação em designs de cartões
- Adicionar sombras sutis a botões e elementos de UI
- Projetar interfaces neumórficas (soft UI)
- Criar efeitos de brilho para elementos de chamada à ação
- Implementar especificações de sombra do material design
- Criar efeitos de elementos flutuantes e elevados
Perguntas Frequentes
O que é box shadow no CSS?
Box shadow é uma propriedade CSS que adiciona efeitos de sombra ao redor do quadro de um elemento. Permite criar profundidade e elevação nos designs através de sombras que podem ser posicionadas, desfocadas, espalhadas e coloridas.
Como adiciono múltiplas camadas de sombra?
Clique no botão '+ Adicionar Camada' para adicionar mais camadas de sombra ao elemento. Cada camada pode ser personalizada independentemente com diferentes posições, desfoque, espalhamento, cores e opacidade.
O que cada parâmetro de sombra controla?
O deslocamento horizontal move a sombra para a esquerda (negativo) ou direita (positivo). O deslocamento vertical a move para cima (negativo) ou baixo (positivo). O raio de desfoque controla a suavidade da sombra.
O que é inset shadow?
Uma sombra inset é desenhada dentro da borda do elemento, não fora. Cria a aparência de que o elemento está pressionado na superfície. Marque a caixa 'Inset' em qualquer camada de sombra para torná-la inset.
Como criar um efeito neumórfico?
O neumorfismo usa duas sombras: uma clara e uma escura, posicionadas em lados opostos. Use os presets 'Neumorfismo' ou 'Neumorfismo Inset' como ponto de partida.
Posso usar valores negativos de espalhamento?
Sim! Valores negativos de espalhamento contraem a sombra para dentro antes de aplicar o desfoque. Isso é comumente usado no design de materiais para criar sombras mais realistas e concentradas.
Como copio o código CSS?
Há duas opções de cópia: 'Copiar CSS' fornece a regra CSS completa, e 'Copiar Valor' fornece apenas o valor box-shadow que você pode colar em qualquer regra CSS existente.
Quais são os estilos de sombra predefinidos?
A ferramenta inclui 12 estilos predefinidos: Suave, Médio, Grande, Extra Grande, Interno, Contorno, Neumorfismo, Neumorfismo Inset, Colorido, Brilho, Elevado e Flutuante.
Posso criar um efeito de brilho com box shadow?
Sim! Use o preset 'Brilho' ou crie o seu próprio definindo os deslocamentos horizontal e vertical como 0, usando um raio de desfoque grande (20px ou mais) e escolhendo uma cor vibrante.
Como funciona a opacidade da sombra?
A opacidade controla quão transparente ou sólida a sombra aparece, de 0 (completamente transparente) a 1 (completamente opaca). Menor opacidade cria sombras sutis, maior opacidade cria sombras mais dramáticas.
O box shadow é suportado em todos os navegadores?
Sim, a propriedade CSS box-shadow tem excelente suporte em todos os navegadores modernos incluindo Chrome, Firefox, Safari, Edge e navegadores móveis. Não requer prefixos de fornecedor.
Posso animar box shadow?
Sim, box shadows podem ser animados usando transições ou animações CSS. Use a propriedade transition no box-shadow, por exemplo: 'transition: box-shadow 0.3s ease'.