Categoria: Desenvolvimento
Gerador de Box Shadow CSS
Desenhe uma box-shadow e copie o CSS
Ajuste o deslocamento, o desfoque, a expansão, a cor e a opacidade, veja uma prévia ao vivo e copie uma declaração box-shadow pronta para colar. Tudo é desenhado pelo seu próprio navegador.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
A box-shadow recebe cinco valores em uma ordem fixa, e pequenas mudanças em qualquer um deles ficam bem diferentes na tela, o que torna desconfortável escrevê-la às cegas. Esta ferramenta desenha a declaração real sobre uma caixa de prévia enquanto você move os controles. É possível adicionar uma segunda camada de contato mais fechada — a combinação que os designers usam para um elemento parecer erguido em vez de borrado — e a opção interna vira a sombra para dentro, para superfícies afundadas.
Como usar
- Ajuste o deslocamento horizontal e vertical, o desfoque e a expansão.
- Escolha uma cor e uma opacidade e, se quiser, ative a sombra interna ou uma camada de contato.
- Copie a declaração box-shadow para a sua folha de estilo.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Algo é enviado?
- Não. A prévia é uma sombra CSS pintada pelo seu navegador e a declaração é montada na página.
- O que a expansão faz?
- A expansão aumenta ou reduz a sombra antes de ela ser desfocada. Uma expansão negativa recolhe a sombra, que é a forma de evitar que uma sombra suave escape pelas laterais do elemento.
- Por que usar duas camadas?
- Uma única sombra larga e suave tende a parecer neblina. Acrescentar uma camada pequena e mais escura junto ao elemento dá a ele uma borda de contato, e as duas juntas se lêem como altura.