Gerador de sombra de caixa CSS
Crie valores de box-shadow em CSS visualmente — ajuste o deslocamento, o desfoque, a dispersão e a cor com uma pré-visualização em tempo real.
Saída CSS
box-shadow: 0px 4px 12px 0px #00000026;Por que usar o gerador de sombras PixConvert?
Editor visual de sombras em caixas — sem adivinhar valores, basta arrastar e visualizar.
Pré-visualização ao vivo
Veja sua sombra em uma pré-visualização realista do cartão — atualiza instantaneamente a cada alteração do controle deslizante.
Múltiplas camadas de sombra
Empilhe várias camadas de sombra para obter efeitos de profundidade avançados. Cada camada é controlada independentemente.
Sombras embutidas
Alterne entre o modo embutido para efeitos de botão pressionado e estilos de brilho interno.
Cor + Opacidade
Escolha qualquer cor de sombra com um controle deslizante de opacidade separado. A saída usa RGBA para transparência precisa.
Saída CSS pronta
O resultado é uma string de valor CSS válida para box-shadow — cole-a diretamente em sua folha de estilo ou token de design.
100% Privado
Totalmente do lado do cliente — sem servidor, sem coleta de dados.
Casos de uso do Box Shadow
As sombras criam profundidade e hierarquia no design de interfaces de usuário.
Elevação do cartão
Crie sombras de elevação no estilo Material Design para cartões, modais e painéis.
- Escalas de sombra de elevação 1-24
- Sombras flutuantes dos botões de ação
- Sombras de sobreposição de diálogo
Profundidade do botão
Adicione sombras sutis e efeitos de pressão embutidos aos botões para criar profundidade 3D.
- Sombra sutil ao passar o cursor sobre ela.
- Sombra embutida para estado pressionado
- efeitos de brilho colorido
Neumorfismo
Crie componentes de interface de usuário neomórficos usando camadas de sombras claras e escuras.
- Camadas de sombra clara e escura
- Elementos elevados da interface de usuário suave
- controles côncavos embutidos
Como criar uma sombra projetada
Ajuste o deslocamento em X, o deslocamento em Y, o raio de desfoque e a dispersão usando os controles deslizantes. Escolha uma cor e opacidade para a sombra.
Veja a atualização da pré-visualização ao vivo instantaneamente. Copie o valor CSS e cole-o na sua folha de estilo.
Ative ou desative sombras internas ou empilhe várias sombras para criar efeitos em camadas — o resultado é separado por vírgulas e pronto para colar.
Explore mais ferramentas
Descubra outras ferramentas gratuitas que funcionam muito bem em conjunto com esta.
Gerador de gradiente CSS
Crie gradientes CSS personalizados visualmente
Verificador de contraste
Verifique as taxas de contraste de cores para conformidade com as WCAG.
Conversor de cores
Converta códigos de cores HEX, RGB e HSL instantaneamente.
Extrator de paleta de cores
Extraia as cores dominantes de qualquer imagem.
Formatador JSON
Formate, valide e minimize JSON instantaneamente.
Testador de expressões regulares
Teste e depure expressões regulares em tempo real.
Perguntas frequentes
Explicação do box-shadow em CSS.
Quais são os parâmetros de sombra da caixa?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. Deslocamento X/Y: posição da sombra. Desfoque: suavidade (0 = borda nítida). Espalhamento: expansão do tamanho (negativo = menor). Inset: desenha a sombra dentro do elemento.
Como faço para criar uma sombra suave?
Aumente o raio de desfoque (20-40px), mantenha a dispersão próxima de 0 e use uma cor com baixa opacidade (rgba(0,0,0,0.1-0.2)). Desloque ligeiramente (y: 4-8px). Isso cria a moderna "sombra projetada suave" comum em sistemas de design.
Posso empilhar várias sombras?
Sim. O CSS aceita múltiplos 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 neomorfismo ou brilhos multicoloridos.
Qual a diferença entre desfoque e dispersão?
O desfoque controla a suavidade da borda da sombra — maior desfoque = mais difusa. A dispersão controla o tamanho da sombra — dispersão positiva torna a sombra maior que o elemento, dispersão negativa a torna menor. A dispersão não afeta o desfoque.
A sombra da caixa afeta o layout?
Não. A sombra (box-shadow) é renderizada fora do modelo de caixa e não afeta o tamanho, a posição ou o fluxo do documento do elemento. Se você precisar de espaço ao redor do elemento para a sombra, use margem (margin) ou preenchimento (padding).