Gerador de Box Shadow CSS Online Gratuito
Crie sombras CSS visualmente com controles de deslocamento, desfoque, expansão e cor. Copie o código com um clique.
Who uses the Gerador de Box Shadow CSS?
- Desenvolvedores de UI gerando sombras de cartões e botões que correspondem às especificações do sistema de design.
- Aprendizes de CSS explorando propriedades de sombra através de uma interface visual com feedback instantâneo.
- Designers criando e testando efeitos de sombra para mockups antes de repassar aos desenvolvedores.
How the Gerador de Box Shadow CSS works
Ajuste os controles deslizantes de deslocamento X, deslocamento Y, raio de desfoque e raio de propagação para moldar sua sombra.
Clique na amostra de cor para escolher uma cor de sombra, e use o controle deslizante de opacidade ao lado.
Ative Inset para um efeito de sombra interna.
Copie o CSS do painel de saída de código.
Tips & tricks
- Esta ferramenta gera uma única camada de sombra — para um efeito multicamadas (como a elevação do Material Design), gere cada camada aqui separadamente e combine-as com vírgulas manualmente.
- Propagação negativa com desfoque maior cria uma sombra suave e difusa que parece mais "flutuante" do que uma sombra com propagação positiva apertada.
- Sombras internas funcionam bem para estados de botão pressionado — experimente um pequeno desfoque com uma cor escura de baixa opacidade.
- O controle deslizante de opacidade controla o canal alfa da cor da sombra, não a opacidade do próprio elemento.
Frequently Asked Questions
Qual é a sintaxe CSS box-shadow?
box-shadow: [inset] deslocamento-X deslocamento-Y raio-desfoque raio-propagação cor. Exemplo: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). Múltiplas sombras são separadas por vírgulas.
O que o raio de propagação faz?
O raio de propagação expande ou contrai a sombra antes do desfoque. Valores positivos fazem a sombra crescer maior que o elemento; valores negativos a encolhem. Uma propagação de -4px com desfoque de 8px cria uma sombra focada e direcional.
O que é uma sombra interna (inset)?
Marcar a caixa Inset faz a sombra aparecer dentro da borda do elemento em vez de fora. Sombras internas criam estados de botão pressionado/afundado, efeitos de cartão embutido e brilhos internos.
Esta ferramenta pode gerar várias camadas de sombra empilhadas, como a elevação do Material Design?
Não — esta ferramenta gera uma camada de sombra por vez. Para um efeito em camadas como a elevação do Material Design (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)), gere cada camada aqui separadamente e combine os valores separados por vírgula manualmente.
O box-shadow afeta o layout e ocupa espaço?
Não. Diferente de margin ou padding, box-shadow não afeta o layout — elementos com sombras não empurram elementos adjacentes. Isso torna as sombras seguras para adicionar sem interromper o layout da página.
Is my data safe when using the Gerador de Box Shadow CSS?
Completely safe. The Gerador de Box Shadow CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Gerador de Box Shadow CSS output in commercial projects?
Yes. The Gerador de Box Shadow CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Gerador de Box Shadow CSS follow official standards?
Yes. The Gerador de Box Shadow CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.