Gerador de box-shadow CSS
Funciona no seu dispositivo. Nada é enviado.Tudo roda no seu navegador - nada é enviado.
Começar com
Camadas
Deslocamento horizontal
Deslocamento vertical
Desfoque
Expansão
Cor
Código
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Editar uma sombra existente
Crie sombras CSS com camadas, inset e predefinições suaves, veja ao vivo e copie o CSS ou uma classe Tailwind. Cole uma sombra existente para editá-la.
Monte a sombra que você quer no olho, sem chutar números. Comece por uma predefinição - suave, média, dura retrô, suave em camadas, flutuante, interna, neumórfica ou brilho - e ajuste o deslocamento, o desfoque, a expansão, a cor, a opacidade e o inset de cada camada enquanto a prévia acompanha. Uma sombra pode ter até oito camadas, que é como se fazem as sombras mais naturais. Copie o resultado como CSS ou como classe Tailwind, compartilhe por link ou cole um box-shadow da sua folha de estilos para continuar editando.
Perguntas frequentes
O que fazem o desfoque e a expansão?
O desfoque suaviza a borda da sombra: 0 é uma linha nítida e valores maiores a esmaecem por mais pixels. A expansão aumenta (positiva) ou diminui (negativa) a sombra antes do desfoque - uma pequena expansão negativa com muito desfoque dá as sombras suaves e recolhidas das interfaces modernas.
Por que usar várias camadas?
Sombras reais são escuras e nítidas perto do objeto e mais claras e suaves longe dele. Uma camada só não faz as duas coisas; empilhar algumas com deslocamento e desfoque dobrando, como a predefinição Suave em camadas, fica bem mais natural.
O que é uma sombra inset?
Uma sombra inset é desenhada dentro da caixa em vez de fora, então a caixa parece afundada - útil para campos de texto, áreas rebaixadas e botões pressionados. Dá para misturar camadas internas e externas na mesma sombra.
box-shadow deixa a página lenta?
Poucas sombras custam pouco. Desfoques muito grandes em muitos elementos, ou animar o próprio box-shadow, podem derrubar os quadros em celulares lentos; para animar, mude a opacidade de um pseudo-elemento que já tenha a sombra.