☁️

css-box-shadow-generator,

Gerador de CSS box-shadow

Gere sombras CSS avançadas (box-shadow) com uma interface de usuário intuitiva.
Uma ferramenta gratuita que suporta múltiplas camadas e as últimas tendências de design.

🥞

Multicamadas

Empilhe várias sombras para expressões ricas

🎨

Predefinições

Aplique instantaneamente Neumorfismo, etc.

⚡

Suporte a Tailwind

Suporta saída CSS padrão e Tailwind

Configurações de camada

Parâmetros de sombra

Deslocamento X (px) 0px

Deslocamento Y (px) 4px

Desfoque (px) 12px

Propagação (px) 0px

Cor da sombra

Opacidade (%) 10%

Sombra interna (inset)

Visualização

BOX

Width

120px

Height

120px

Border Radius

12px

Cor de fundo

Cor da caixa

Sobre

O Gerador de CSS box-shadow é uma ferramenta gratuita que cria estilos de sombra essenciais (box-shadow) para web design com uma interface de usuário intuitiva.

Não apenas sombras simples, mas também sombras ricas com várias camadas, sombras suaves como as usadas pela Apple e serviços da web modernos, Neumorfismo 3D e Neo Brutalismo plano podem ser criados instantaneamente a partir de predefinições.

O código gerado pode ser emitido em três formatos: propriedades CSS padrão, variáveis CSS (propiedades personalizadas) e classes de utilitário Tailwind CSS (suporta valores arbitrários) e pode ser copiado com um único clique.

Como usar

1 Escolher uma base

Escolha uma predefinição superior que esteja próxima à imagem que você deseja criar. Claro, você também pode construir do zero adicionando camadas.

2 Ajustar sombras

Ajuste os deslocamentos X/Y (posição), intensidade do desfoque, propagação, cor e opacidade. Ao empilhar várias sombras com "Adicionar camada", você pode criar sombras mais naturais e luxuosas.

3 Copiar código

Selecione "CSS" ou "Tailwind" no painel de saída de acordo com o seu ambiente e pressione o botão da área de transferência para copiar o código.

Propriedades

Sintaxe e propriedades de box-shadow


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

offset-x / offset-y: A posição horizontal e vertical da sombra. Valores positivos movem a sombra para a direita/baixo, valores negativos a movem para a esquerda/cima.
blur-radius (desfoque): O desfoque da sombra. Quanto maior o valor, mais larga e clara a sombra se espalha. Em 0, torna-se um limite nítido (sombra sólida).
spread-radius (propagação): Expande ou reduz o tamanho da própria sombra. Valores positivos resultam em uma sombra maior que o elemento, valores negativos resultam em uma sombra menor.
inset (sombra interna): Quando esta palavra-chave é especificada, a sombra cai dentro do elemento e não fora. Usado para expressar interfaces de usuário recuadas.

FAQ

Q. O box-shadow afeta o desempenho?

A.Sombras grandes e desfocadas e múltiplas camadas são difíceis de desenhar, portanto, a renderização pode ficar lenta em dispositivos móveis. Cuidados especiais são necessários ao animar o box-shadow.

Q. Qual é a diferença entre box-shadow e filter: drop-shadow?

A.O box-shadow aplica uma sombra à caixa do elemento (retângulo). Por outro lado, filter: drop-shadow() gera uma sombra para a forma opaca do elemento (como o contorno de um PNG transparente).

Q. Em quais expressões o inset é usado?

A.Ele é usado para o estado pressionado de botões (efeito de amassado), sombras internas de campos de texto, desenho de destaque em Neumorfismo, etc.

Q. Quais são os benefícios de empilhar várias sombras?

A.Empilhar várias camadas pode expressar uma profundidade mais natural e realista do que uma única sombra desfocada. Por exemplo, empilhar uma sombra próxima (pequena e escura) e uma sombra distante (grande e clara) é uma técnica comum.

Casos de uso

Interfaces de cartão e modais

Faz os elementos se destacarem do fundo, transmitindo visualmente ao usuário que são elementos clicáveis ou conteúdo importante.

Estados de botão hover/active

Ao espalhar a sombra ao passar o mouse ou alternar para `inset` ao clicar, você pode implementar um botão interativo com uma sensação de pressão.

Design Neumorfismo

Ao colocar uma sombra clara e uma sombra escura na diagonal em um elemento da mesma cor do fundo, você cria uma textura que faz o elemento parecer empurrado ou recortado.