Gerador de sombra de caixa
Gere propriedades CSS box-shadow
Camadas de sombra
Sombra 1
Sombras predefinidas
Dicas de sombra
Valores de deslocamento positivos movem as sombras para baixo e para a direita; valores negativos as movem para cima e para a esquerda.
O raio de desfoque cria a suavidade da sombra; valores maiores criam sombras mais difusas.
O raio de expansão aumenta ou diminui o tamanho da sombra.
Sombras internas criam sombras no interior para efeitos de profundidade.
Várias sombras podem ser sobrepostas para criar efeitos de iluminação complexos.
Valores menores de opacidade criam sombras mais sutis e realistas.
Prévia em tempo real
Escala da prévia: 100%
Declaração CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Classe CSS
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (aproximado)
shadowEsta é uma sugestão de estilo. Deslocamentos e cores personalizados, sombras internas e várias camadas precisam do CSS gerado.
Ajuste uma camada ou experimente uma predefinição. A prévia é atualizada enquanto você trabalha.
Sobre o gerador de sombra de caixa
Nosso gerador de box shadow CSS grátis ajuda você a criar efeitos de sombra profissionais com controle visual completo. Ajuste deslocamento, raio de desfoque, raio de expansão, cor e opacidade com controles deslizantes intuitivos e veja o resultado se atualizar em tempo real. Combine várias sombras em camadas para criar efeitos de profundidade complexos que dão destaque aos elementos da sua interface.
As sombras são essenciais para estabelecer hierarquia visual e profundidade em interfaces web modernas. Um box-shadow bem elaborado pode fazer os cards parecerem flutuar sobre a página, os botões parecerem interativos e os elementos de navegação se destacarem do fundo. Esta ferramenta elimina a tentativa e erro de escrever valores de box-shadow à mão.
O gerador oferece suporte a sombras externas e sombras internas (inset), a várias camadas de sombra e inclui 6 modelos predefinidos para estilos de sombra comuns. O resultado é fornecido como código CSS com um botão de cópia de um clique, junto com sugestões aproximadas de classes utilitárias do Tailwind CSS. Todo o processamento acontece no seu navegador, sem envio de dados a nenhum servidor.
Principais recursos
- Várias camadas de sombra que podem ser adicionadas, removidas e configuradas individualmente
- Controles deslizantes precisos para deslocamento X, deslocamento Y, raio de desfoque e raio de expansão
- Seletor de cores com entrada hexadecimal e opacidade ajustável para cada camada de sombra
- Alternância de sombra interna (inset) para criar profundidade interna e efeitos em relevo
- 6 modelos de sombra predefinidos: Sutil, Média, Grande, Extra grande, Interna e Múltipla
- Gerador de sombra aleatória para descobrir combinações criativas de sombras
- Visualização ao vivo em tempo real com cor do elemento personalizável
- Cópia para a área de transferência com um clique e saída de CSS limpa
- Saídas em formatos alternativos, incluindo classe CSS e utilitário aproximado do Tailwind CSS
- Suporte completo ao modo escuro para editar com conforto em qualquer condição de iluminação
Como usar o gerador de sombra de caixa
- Adicione camadas de sombra: comece com a sombra padrão ou clique em Adicionar para criar camadas de sombra extras e obter efeitos complexos.
- Ajuste as propriedades da sombra: use os controles deslizantes para definir deslocamento X/Y, raio de desfoque, raio de expansão, cor e opacidade de cada camada de sombra.
- Ative o inset: marque a caixa Inset em qualquer camada de sombra para criar um efeito de sombra interna em vez de externa.
- Visualize o resultado: veja o elemento de visualização ao vivo para conferir exatamente como a sua sombra fica. Altere a cor do elemento de visualização, se necessário.
- Experimente os modelos: clique em qualquer um dos 6 modelos predefinidos para aplicar rapidamente estilos de sombra comuns como ponto de partida.
- Copie o CSS: clique no botão Copiar para copiar a declaração CSS box-shadow completa para a área de transferência.
Casos de uso
- Elevação de cards: adicione profundidade aos componentes de card para que pareçam flutuar sobre o fundo da página.
- Estados de hover em botões: crie transições de sombra para botões que respondem visualmente à interação do usuário.
- Estilo de modais e diálogos: aplique sombras grandes e suaves em modais e caixas de diálogo para separá-los claramente do fundo.
- Menus suspensos de navegação: estilize menus suspensos e popovers com sombras que transmitem sobreposição e profundidade.
- Efeitos de foco em campos: use sombras coloridas como indicadores de foco em campos de formulário e elementos interativos.
- Efeitos inset: crie aparências de pressionado ou em relevo para botões de alternância, estados ativos e elementos decorativos.
- Design neumórfico: combine várias sombras claras e escuras para obter a popular estética de design de interface suave.
- Molduras de imagem: adicione sombras sutis a imagens e contêineres de mídia para um visual de galeria bem acabado.
Perguntas frequentes
Esta ferramenta é gratuita?
Sim, o gerador de sombra de caixa é totalmente gratuito, sem limite para o número de sombras que você pode criar. Não é necessário cadastro nem pagamento.
Meus dados estão seguros?
Toda a geração e a visualização das sombras acontecem inteiramente no seu navegador. Nenhum dado é enviado a servidores externos, então suas configurações e o CSS gerado permanecem totalmente privados.
Qual é a diferença entre raio de desfoque e raio de expansão?
O raio de desfoque controla o quanto a sombra é suave ou difusa: valores maiores criam um esmaecimento mais gradual. O raio de expansão aumenta (valores positivos) ou reduz (valores negativos) o tamanho da sombra em relação ao elemento.
Posso usar várias sombras em um mesmo elemento?
Sim, o CSS aceita vários box-shadows separados por vírgulas. Esta ferramenta permite adicionar várias camadas de sombra e as combina automaticamente em uma única declaração box-shadow.
O que é uma sombra inset?
Uma sombra inset é desenhada dentro do elemento, e não fora, criando uma aparência de recuo ou de pressionado. É muito usada em campos de entrada, estados ativos de botões e designs neumórficos.
O box-shadow é compatível com todos os navegadores?
Sim, a propriedade box-shadow tem suporte completo em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. Não são necessários prefixos de fornecedor.
Dicas e boas práticas
- Mantenha as sombras sutis: opacidade baixa (5-15%) e desfoque moderado criam sombras realistas e profissionais que não sobrecarregam o design.
- Use expansão negativa: um raio de expansão levemente negativo faz as sombras parecerem mais compactas e concentradas sob o elemento.
- Combine sombras em camadas: junte uma sombra escura e compacta com outra mais ampla e clara para obter uma profundidade de aparência natural, semelhante à iluminação do mundo real.
- Respeite a fonte de luz: mantenha as direções de deslocamento consistentes em todo o design para simular uma única fonte de luz coerente.
- Considere o desempenho: valores altos de desfoque em muitos elementos podem prejudicar o desempenho de renderização, principalmente em dispositivos móveis.
- Use sombras para criar hierarquia: elevações maiores (deslocamento e desfoque maiores) devem indicar os elementos que estão mais próximos do usuário na pilha visual.