Ferramentas CSS e de desenvolvimento front-end

Gerador de sombras de caixa

Gere box-shadow para cartões ou botões e observe o efeito de cada parâmetro na pré-visualização.

Parâmetros

Processamento no navegador

Pré-visualização em tempo real

Atualização automática ao alterar os parâmetros
Selecione ou copie diretamente

Ajuste deslocamentos, desfoque, expansão, cor, opacidade e inset da sombra de um cartão.

Os dados introduzidos são processados apenas no seu navegador e nunca enviados para um servidor.

Sobre esta ferramenta

O Gerador de sombras de caixa cria uma sombra com deslocamentos horizontal e vertical, raio de desfoque, raio de expansão, cor, opacidade e inset. Os parâmetros válidos são aplicados imediatamente ao cartão de pré-visualização.

Como utilizar

  1. Ajuste os deslocamentos horizontal e vertical e o raio de desfoque.
  2. Defina o raio de expansão, a cor e a opacidade da sombra.
  3. Ative Sombra interior (inset), se necessário.
  4. Confira a pré-visualização e copie o CSS ou reponha a sombra inicial.

Exemplos de utilização

  • Um deslocamento horizontal negativo move a sombra para a esquerda.
  • Um raio de expansão positivo aumenta a sombra; um valor negativo reduz a sua área.
  • Ativar inset coloca a sombra no interior da caixa.
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);

Funcionamento e explicação do CSS

box-shadow recebe offset-x, offset-y, blur-radius, spread-radius e color, por esta ordem, com inset opcional. Os deslocamentos e a expansão podem ser negativos; o raio de desfoque não. A opacidade controla a mistura da sombra com o fundo.

Utilizações comuns

  • Dar profundidade a painéis, caixas de diálogo e botões.
  • Comparar sombras suaves e bem definidas.
  • Criar sombras interiores para elementos de formulários.

Privacidade

O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.

FAQ

Qual é a diferença entre blur e spread?

blur controla a suavidade das margens. spread controla quanto a forma da sombra se expande ou contrai antes do desfoque.

O que é inset?

inset transforma a sombra exterior numa sombra no interior da caixa.

box-shadow aceita valores negativos?

Os deslocamentos horizontal e vertical e a expansão podem ser negativos. O raio de desfoque não pode.

Esta ferramenta permite várias sombras?

Esta página gera uma única sombra. O CSS permite várias camadas de box-shadow separadas por vírgulas.

Gerador de sombras de texto Gerador de cantos arredondados Gerador de filtros CSS

Voltar ao diretório de ferramentas para programadores