Gerador de CSS Box Shadow e Border Radius

Gerador de CSS Box Shadow e Border Radius

🎨 Gerador gratuito de box-shadow e border-radius em CSS com pré-visualização ao vivo. Crie sombras bonitas, cantos arredondados e efeitos modernos de UI. Código pronto para copiar e colar no seu web design.

Propriedade Box Shadow

A propriedade CSS box-shadow adiciona efeitos de sombra ao redor da moldura de um elemento. Você pode definir vários efeitos separados por vírgulas. A sombra é descrita pelos deslocamentos X e Y em relação ao elemento, pelo raio de desfoque e de expansão, e pela cor.

Sintaxe: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Parâmetros da sombra

• Deslocamento X (horizontal): valores positivos movem a sombra para a direita, negativos para a esquerda
• Deslocamento Y (vertical): valores positivos movem a sombra para baixo, negativos para cima
• Raio de desfoque: valores maiores criam mais desfoque. 0 significa sombra nítida
• Raio de expansão: valores positivos expandem a sombra, negativos a reduzem
• Cor: qualquer valor de cor CSS (hex, rgb, rgba, hsl)
• Inset: transforma a sombra em interna, em vez de externa

Propriedade Border Radius

A propriedade border-radius arredonda os cantos da borda externa de um elemento. Você pode definir um único raio para cantos circulares, ou dois raios para cantos elípticos.

Sintaxe: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Casos de uso comuns

• Cards: sombra suave (0 4px 6px rgba(0,0,0,0.1)) com raio médio (8px)
• Botões: sombra colorida combinando com a cor do botão para efeito de profundidade
• Modais: sombra grande (0 20px 25px rgba(0,0,0,0.15)) para parecer flutuante
• Imagens: avatares circulares (border-radius: 50%) ou miniaturas arredondadas (8–16px)
• Campos de input: sombra interna para estado pressionado/focado
• Design neumórfico: múltiplas sombras (clara e escura) com fundo correspondente

Boas práticas para sombras

• Use sombras sutis: 10–20% de opacidade geralmente é suficiente para profundidade
• Y-offset > X-offset: imita luz natural vindo de cima
• Mais desfoque para elevação: mais blur = parece mais alto na página
• Combine a cor da sombra: use a cor do elemento com baixa opacidade para coesão
• Performance: evite animar box-shadow; use opacity ou transform

Estilos populares de sombra

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Padrões de Border Radius

• Nenhum (0px): cantos retos, visual minimalista moderno
• Pequeno (4px): arredondamento sutil para inputs e botões
• Médio (8px): padrão para cards e containers
• Grande (16px+): design amigável e acolhedor
• Pílula (999px ou 50%): extremidades arredondadas para tags e badges
• Círculo (50%): avatares e botões de ícone (requer elemento quadrado)

Técnicas avançadas

• Múltiplas sombras: combine sombras para efeitos em camadas
• Efeito glow: 0 0 20px [cor] sem deslocamento
• Neumorfismo: sombra clara no topo-esquerda, sombra escura no fundo-direita
• Anéis de foco: sombra colorida para acessibilidade (0 0 0 3px rgba(cor,0.5))
• Efeito 3D: múltiplas sombras com deslocamento e desfoque crescentes

Suporte do navegador

Box-shadow e border-radius são suportados em todos os navegadores modernos. Para IE8 e anteriores, use prefixos de fornecedor (-webkit-box-shadow, -moz-box-shadow), embora isso raramente seja necessário hoje.

💡 Dica: Para efeitos hover, não anime box-shadow diretamente, pois é caro. Em vez disso, crie a sombra em um pseudo-elemento (::before ou ::after) e anime a sua opacidade. Isso entrega o mesmo efeito visual com desempenho muito melhor, especialmente em dispositivos móveis!