Gerador de Box Shadow
Ajuste deslocamento, desfoque e expansão com controles e copie a linha de box-shadow.
CSS
Crie uma sombra CSS online
Sombras destacam cards, botões e menus da página. Esta página abre o Gerador de CSS na aba de sombra, para você ajustar a sombra numa prévia em vez de editar números e recarregar.
Sombras comuns
| CSS | Uso |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | Sombra fina para cards e campos |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | Card suave, flutuando |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | Sombra dura deslocada, estilo flat |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | Campo ou botão afundado |
Desempenho
Sombras grandes e desfocadas custam tempo de desenho, principalmente quando são animadas. Para animar uma sombra no hover, um truque comum é colocar a sombra em um pseudoelemento e animar a opacidade dele em vez da própria sombra.
Ferramentas relacionadas
Para arredondar o mesmo elemento, veja o gerador de border-radius; a sombra acompanha os cantos arredondados. Para o fundo, veja o gerador de gradiente CSS.