Saltar para o conteúdo
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Gerador de sombras CSS (box-shadow)

Crie uma sombra CSS ajustando deslocamento, desfoque, expansão e cor, com pré-visualização em tempo real e código box-shadow pronto a copiar.

É processado no seu dispositivo. Nada é enviado para nenhum servidor.
box-shadow: 0px 8px 24px -4px rgba(16, 32, 29, 0.25);

Compõe a sintaxe CSS box-shadow com os seus cinco parâmetros: deslocamento horizontal, deslocamento vertical, desfoque, expansão e cor, além da opção inset.

Casos de uso

  • Dar profundidade a um cartão ou botão.
  • Criar um efeito de elevação para uma janela modal.
  • Desenhar uma sombra interior subtil.

Como funciona

  1. 1

    Ajuste os valores

    Altere o deslocamento X/Y, o desfoque, a expansão e a cor.

  2. 2

    Ative «Inset» se precisar

    Marque a caixa para uma sombra interior.

  3. 3

    Copie o CSS

    Copie a propriedade box-shadow pronta a colar.

Detalhes técnicos

  • Deslocamento, desfoque e expansão exprimem-se em píxeis; os deslocamentos negativos movem a sombra para a esquerda ou para cima.
  • No campo de cor vale qualquer cor CSS. As sombras costumam ficar mais naturais com transparência, por exemplo rgba(0, 0, 0, 0.2), em vez de uma cor sólida.
  • Gera uma única sombra. Para combinar várias (uma suave e larga e outra curta e marcada), separe-as com vírgulas no CSS final.

Perguntas frequentes

O que faz o valor de expansão (spread)?

Aumenta ou reduz a sombra em relação ao tamanho do elemento; valores negativos tornam-na mais pequena do que o elemento.

Ferramentas relacionadas

← Cores e design