a11y.skipToMainContent
1

Gerador de Sombras de Caixa

Construa CSS box-shadow visualmente — ajuste offset, borrão, spread, cor, opacidade e inset com visualização ao vivo.

px
px
px
px
%

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Box Shadow Generator

  1. Ajuste as barras deslizantes para deslocamento X/Y, borrar, espalhar, cor, opacidade.
  2. Alternar para as sombras internas.
  3. Entendido.

O que é {nome}?

Sliders para cada propriedade da especificação CSS box-shadow. Um cartão de pré-visualização mostra exatamente como será sua sombra. Copie o CSS de uma linha quando terminar.

Advertisement

FAQ

O que é o raio de propagação?
A propagação positiva aumenta o tamanho da sombra antes de desfocar; o negativo encolhe-a. Combine espalhamento negativo com deslocamento para sombras direcionais limpas.
Posso adicionar várias sombras de caixa de uma vez?
Sim. Adicione quantas camadas de sombra quiser; elas são combinadas em uma única propriedade CSS separada por vírgulas que você pode copiar.
O que faz a caixa de verificação do inset?
Inset desenha a sombra dentro do elemento em vez de fora, criando um efeito visual pressionado ou afundado em seu componente.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Box Shadow Generator on Wikipedia·Developer Tools on Wikipedia·Box Shadow Generator on Britannica

People also use

← Back to Developer Tools · All tags
Advertisement