Saltar para o conteúdo
QuickToolio
esEspanolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Gerador de sombras CSS (box-shadow)

Ajuste deslocamento, desfoque, expansão e cor de uma sombra CSS com pré-visualização ao vivo.

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

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

Compõe a sintaxe box-shadow do CSS com os cinco parâmetros que aceita: deslocamento horizontal, vertical, desfoque, propagação e cor, com a opção inset.

Casos de uso

  • Adicionar profundidade a um cartão ou botão.
  • Criar um efeito de elevação num modal.
  • Desenhar uma sombra interna sutil.

Como funciona

  1. 1

    Ajuste os valores

    Modifique o deslocamento X/Y, o desfoque, a propagação e a cor.

  2. 2

    Ative inset se necessário

    Marque a caixa para criar uma sombra interna.

  3. 3

    Copie o CSS

    Copie a propriedade box-shadow pronta para colar.

Perguntas frequentes

O que faz o valor 'propagação'?

Controla o quanto a sombra cresce ou encolhe em relação ao tamanho do elemento; valores negativos tornam-na menor do que o elemento.

Ferramentas relacionadas

← Cores e design