132 · Design e Web

Gerador de sombra de caixa

Arraste os controles deslizantes para moldar uma sombra, assista à prévia e copie o CSS.

Seus dados: Esta ferramenta processa sua entrada neste navegador. CapyHelp não carrega essa entrada para gerar seu resultado. Detalhes de privacidade

Gerador de sombra de caixa

#1e1b4b

Como usar o gerador de sombra de caixa

  1. Ajuste o deslocamento, o desfoque e a propagação.
  2. Escolha uma cor e opacidade.
  3. Copie a linha box-shadow.

Sombras de aparência natural

As sombras reais são suaves e levemente coloridas. Um grande desfoque com dispersão negativa, baixa opacidade e um toque de cor em seu design parece mais natural do que o preto sólido. Uma segunda sombra estreita adiciona uma borda nítida, que é o que a opção “segunda camada suave” faz.

Exemplos

Y 12px, desfoque 32px, propagação −8px, 25%

Uma sombra de cartão suave

Inserção

Um olhar pressionado

Perguntas

A sombra da caixa afeta o layout?

Não. As sombras são desenhadas fora do elemento sem mover nada ao seu redor.

Tradução automática. Revise resultados importantes.