Gerador de CSS Box Shadow
Crie sombras CSS visualmente com pré-visualização ao vivo
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);Reportar um Problema
Encontrou um bug ou tem uma sugestão? Ajude-nos a melhorar esta ferramenta.
O que é esta ferramenta?
O Gerador de CSS Box Shadow cria declarações box-shadow prontas para produção com pré-visualização visual ao vivo. Suporta sombras simples e múltiplas em camadas, com controles para deslocamento horizontal/vertical, raio de desfoque, raio de expansão, cor e a opção inset. Crie efeitos de sombra complexos visualmente sem escrever CSS manualmente.
Como usar
- 1
Adicionar camada de sombra
Clique em adicionar para criar uma nova camada de sombra.
- 2
Ajustar parâmetros
Defina o deslocamento X/Y, o desfoque, a expansão, a cor e a opacidade de cada camada.
- 3
Pré-visualizar e copiar
Veja a pré-visualização ao vivo e copie o código CSS gerado.
Perguntas frequentes
Como o box-shadow funciona?
box-shadow adiciona um efeito de sombra em torno da moldura de um elemento. Sintaxe: box-shadow: h-offset v-offset blur spread color inset. Várias sombras são separadas por vírgulas. O navegador renderiza cada camada de sombra independentemente e as compõe juntas. Use várias camadas para criar efeitos de profundidade complexos.
O que torna uma sombra realista?
Sombras realistas têm um desfoque maior em relação ao deslocamento (tipicamente 3-5 vezes), opacidade ligeiramente menor (10-30%) e cores com tom quente. Múltiplas camadas de sombra com diferentes tamanhos de desfoque criam uma profundidade mais natural. O Material Design fornece valores de sombra específicos para diferentes níveis de elevação.
O que fazer se o resultado parecer errado?
Confira seus valores de entrada duas vezes. A ferramenta usa fórmulas padrão, mas casos extremos podem exigir verificação manual.