Gerador de box-shadow CSS

Ajuste deslocamento, desfoque, espalhamento, cor e opacidade vendo o resultado, e leve o CSS. Inclui presets que empilham várias sombras para uma sensação de profundidade mais natural.

🎨 Tudo roda no seu navegador. Sem instalar nada, sem cadastro.

Deslocamento X0px

Deslocamento Y8px

Desfoque20px

Espalhamento-4px

Cor da sombra

Opacidade20%

Sombra interna (inset) — aspecto afundado

box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);

Uma sombra natural normalmente cai reta para baixo (deslocamento X de 0) e usa um azul-marinho fraco em vez de preto, um pouco mais escuro que o fundo. Sombras preto puro ficam embaçadas.

O que esta ferramenta faz

Deslocamento, desfoque, espalhamento e cor
Suporta sombras internas (inset)
Presets naturais de várias camadas
Copie o CSS

Outras ferramentas de cor

Gerador de gradiente CSSMonte um gradiente CSS com duas ou três cores Gerador de paletas de coresTire as cores que combinam com uma cor base, por regra Gerador de tons de corTransforme uma cor numa escala 50–900 Misturador de coresEncontre a cor que fica entre duas

As cores podem aparecer um pouco diferentes conforme a sua tela e o perfil de cor dela.