Desenvolvedor / CSS
Gerador de box-shadow CSS
Crie visualmente um box-shadow CSS: ajuste deslocamento, desfoque, expansão, cor, opacidade, inset e várias camadas, use predefinições e veja uma prévia ao vivo; depois, copie o CSS.
Gerador de box-shadow CSS: Cada camada se torna uma sombra na lista de box-shadow: deslocamento horizontal e vertical, raio de desfoque, expansão e uma cor escrita como rgb() com a opacidade após uma barra. As camadas são desenhadas com a primeira por cima. Você pode alterar o raio dos cantos, a cor e o fundo da caixa de prévia para combinar com seu design; a sombra acompanha os cantos exatamente como acompanhará na sua página. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas para desenvolvedores
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Os valores são deslocamento para a direita, deslocamento para baixo, desfoque, expansão e cor. Várias camadas finas parecem mais naturais do que uma sombra pesada; as camadas posteriores são desenhadas sob as anteriores.
Predefinições
Elevação
Sistemas de design usam sombras para mostrar a que distância algo parece flutuar acima da página: um cartão em repouso tem uma sombra pequena e concentrada, enquanto um menu ou diálogo tem uma sombra maior e mais suave. Manter alguns níveis fixos, em vez de usar uma sombra diferente em cada lugar, faz a interface parecer consistente.
Sombras sobre um fundo escuro quase não aparecem; nesse caso, uma cor de superfície mais clara ou uma borda fina cumpre a mesma função. Combine sombras com um gradiente CSS em botões e cartões.
Sombras e desempenho
Um desfoque grande custa mais para ser renderizado que um pequeno, o que importa quando muitos elementos com sombra rolam ou são animados ao mesmo tempo. Para animar uma sombra ao passar o cursor, é mais suave fazer uma segunda sombra mais forte aparecer gradualmente em um pseudo-elemento com opacidade do que alterar a própria box-shadow a cada quadro.
Como usar
- Comece com uma predefinição ou ajuste o deslocamento, o desfoque, a expansão e a opacidade da primeira camada.
- Adicione mais camadas para obter uma sombra mais suave e realista ou marque inset para criar uma sombra dentro da caixa.
- Copie a declaração box-shadow.
Privacidade e limitações
Tudo é executado no seu navegador; sua última sombra é mantida apenas neste navegador.
Ferramentas relacionadas
Perguntas frequentes
Quais são os quatro números em box-shadow?
O deslocamento horizontal (um valor positivo move a sombra para a direita), o deslocamento vertical (um valor positivo move a sombra para baixo), o raio de desfoque (quanto maior, mais suave; ele não pode ser negativo) e a expansão (um valor positivo deixa a sombra maior que a caixa; um negativo, menor). A cor vem por último.
Como faço uma sombra parecer natural?
Use uma opacidade baixa, desloque a sombra para baixo como se a luz viesse de cima e combine duas ou mais camadas: uma menor e mais nítida, próxima da caixa, e outra maior e mais suave, mais distante. Uma expansão ligeiramente negativa impede que um desfoque grande apareça nas laterais.
O que inset faz?
Ele desenha a sombra dentro da caixa em vez de fora, fazendo a caixa parecer pressionada para dentro — ideal para campos de entrada e botões pressionados.
Por que minha sombra não aparece em uma imagem?
box-shadow é desenhado ao redor da caixa do elemento, não ao redor do formato da imagem dentro dela. Para contornar um PNG transparente, use o filtro CSS drop-shadow().
Ferramenta grátis · no seu navegador execuções · não precisa de conta