🌫️

gerador sombra CSS

Crie valores CSS box-shadow visualmente. Ajuste deslocamento, desfoque, propagação, cor e opacidade com pré-visualização ao vivo. Empilhe várias camadas e copie o CSS final.

Ferramentas de geração Executa localmente Nenhum dado enviado
cssbox-shadowgeradordesign
Camadas
Deslocamento X4px
Deslocamento Y4px
Desfoque8px
Propagação0px
%
Inset

O que é o gerador sombra CSS?

O gerador sombra CSS permite criar valores de box-shadow visualmente e copiar o CSS instantaneamente. Ajuste deslocamentos, desfoque, propagação, cor e opacidade com visualização ao vivo.

Como usar o gerador sombra CSS

  1. Ajuste os controles deslizantes Deslocamento X/Y, Desfoque e Propagação.
  2. Escolha uma cor de sombra e defina a opacidade.
  3. Ative/desative Inset para um efeito de sombra interna.
  4. Adicione mais camadas para sombras complexas.
  5. Copie o CSS e cole no seu projeto.

Ferramentas relacionadas

🌈
gerador gradiente CSS
Crie gradientes CSS lineares e radiais
🖌️
seletor de cor
Escolha e converta cores entre formatos
🎨
Formatador CSS
Formatar e embelezar código CSS
Saiba mais▾
Parâmetros de Box Shadow
  • Deslocamento X/Y —desloca a sombra horizontalmente e verticalmente
  • Desfoque —define o quão suave/desfocada é a borda da sombra
  • Propagação —expande ou contrai o tamanho da sombra
  • Inset —renderiza a sombra dentro do elemento
Perguntas frequentes
Posso adicionar várias sombras?

Sim. Clique em 'Adicionar camada' para empilhar vários valores de box-shadow, combinados com vírgulas no CSS de saída.

Como uso o CSS gerado?

Clique em 'Copiar CSS' e cole a propriedade box-shadow diretamente no seu arquivo CSS ou bloco de estilo.