Gerador de Box-Shadow CSS
Gere valores de box-shadow visualmente. Ajuste deslocamento, desfoque, dispersão, cor e use sombras internas ou múltiplas. Copie o CSS instantaneamente.
Preview
Shadows
CSS
box-shadow: 0px 4px 12px 0px #00000080; Predefinições
Índice
O que é box-shadow?
box-shadow é uma propriedade CSS que desenha uma ou mais sombras atrás de um elemento. Você controla o deslocamento horizontal e vertical, o raio de desfoque, a dispersão, a cor e se a sombra é interna. As sombras adicionam profundidade sem marcação ou imagens extras.
Sintaxe
box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Múltiplas sombras são separadas por vírgulas. Offset X/Y movem a sombra; blur suaviza a borda; spread aumenta ou diminui a sombra; a cor pode ser hex, rgb ou rgba. Use inset para uma sombra interna.
Casos de uso
- Cartões e painéis — Sombras suaves para elevar o conteúdo.
- Botões — Profundidade sutil ou interna para estado pressionado.
- Modais e menus suspensos — Sombras em camadas para elevação.
- Imagens — Enquadre ou flutue imagens com uma sombra.
Perguntas frequentes
Uma sombra box interna é desenhada dentro da borda do elemento, como se a luz viesse de cima. Use-a para botões pressionados, entradas ou painéis afundados.
Sim. Adicione mais sombras com "Adicionar sombra". Elas se empilham em ordem; a primeira sombra fica no topo. Use múltiplas sombras para profundidade em camadas.