Gerador de Box Shadow CSS
Crie valores de box-shadow CSS de forma visual: ajuste deslocamento, desfoque, expansão e cor com prévia ao vivo.
Saída CSS
box-shadow: 0px 4px 12px 0px #00000026;Por que usar o gerador de box shadow do PixConvert
Editor visual de box-shadow: sem chutar valores, é só arrastar e ver a prévia.
Prévia ao vivo
Veja sua sombra em um card realista, com atualização instantânea a cada ajuste nos controles deslizantes.
Várias camadas de sombra
Empilhe várias camadas de sombra para criar efeitos avançados de profundidade. Cada camada é controlada de forma independente.
Sombras internas
Ative o modo inset para efeitos de botão pressionado e estilos de brilho interno.
Cor + opacidade
Escolha qualquer cor de sombra com um controle de opacidade separado. A saída usa rgba para transparência precisa.
Saída CSS pronta
A saída é um valor de box-shadow CSS válido: cole direto na sua folha de estilos ou no seu design token.
100% privado
Tudo roda no seu navegador: sem servidor e sem coleta de dados.
Casos de uso de box shadow
Sombras criam profundidade e hierarquia no design de interfaces.
Elevação de cards
Crie sombras de elevação no estilo Material Design para cards, modais e painéis.
- Escalas de sombra de elevação 1-24
- Sombras para botões de ação flutuantes
- Sombras para sobreposição de diálogos
Profundidade em botões
Adicione drop shadows sutis e efeitos inset de botão pressionado para dar profundidade 3D.
- Drop shadow sutil ao passar o mouse
- Sombra inset para o estado pressionado
- Efeitos de brilho colorido
Neumorfismo
Crie componentes de interface neumórficos usando camadas de sombras claras e escuras.
- Camadas de sombra clara + escura
- Elementos em relevo no estilo Soft UI
- Controles côncavos com inset
Como criar um box shadow
Ajuste o deslocamento X, o deslocamento Y, o raio de desfoque e a expansão com os controles deslizantes. Escolha a cor e a opacidade da sombra.
Veja a prévia ao vivo se atualizar na hora. Copie o valor CSS e cole na sua folha de estilos.
Ative sombras inset ou empilhe várias sombras para criar efeitos em camadas: a saída é separada por vírgulas e já está pronta para colar.
Explore mais ferramentas
Descubra outras ferramentas grátis que combinam muito bem com esta
Gerador de gradiente CSS
Crie gradientes CSS personalizados de forma visual
Verificador de contraste
Verifique as taxas de contraste de cores para conformidade com a WCAG
Conversor de cores
Converta códigos de cor HEX, RGB e HSL na hora
Extrator de paleta de cores
Extraia as cores dominantes de qualquer imagem
Formatador de JSON
Formate, valide e minifique JSON na hora
Testador de regex
Teste e depure expressões regulares em tempo real
Perguntas frequentes
O box-shadow CSS explicado.
Quais são os parâmetros do box-shadow?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. Deslocamento X/Y: posição da sombra. Desfoque: suavidade (0 = borda definida). Expansão: aumento de tamanho (negativa = menor). Inset: desenha a sombra dentro do elemento.
Como criar uma sombra suave?
Aumente o raio de desfoque (20-40px), mantenha a expansão perto de 0 e use uma cor com baixa opacidade (rgba(0,0,0,0.1-0.2)). Aplique um leve deslocamento (y: 4-8px). Isso cria a moderna “sombra suave” comum em design systems.
Posso empilhar várias sombras?
Sim. O CSS aceita vários valores de sombra separados por vírgula: box-shadow: shadow1, shadow2, shadow3. Use o botão “Adicionar camada de sombra” para criar efeitos em camadas, como neumorfismo ou brilhos multicoloridos.
Qual é a diferença entre desfoque e expansão?
O desfoque controla a suavidade da borda da sombra: quanto maior o desfoque, mais difusa ela fica. A expansão controla o tamanho da sombra: uma expansão positiva deixa a sombra maior que o elemento, e uma negativa deixa a sombra menor. A expansão não afeta o desfoque.
O box-shadow afeta o layout?
Não. O box-shadow é renderizado fora do box model e não afeta o tamanho, a posição nem o fluxo do documento. Se você precisa de espaço ao redor do elemento para a sombra, use margin ou padding.