Ajuste visual das sombras em tempo real
Com esta ferramenta, você controla todos os parâmetros do box-shadow — deslocamento, desfoque, espalhamento, cor e opacidade — usando controles intuitivos como sliders e seletor de cor. O resultado é exibido instantaneamente em um elemento de pré-visualização, permitindo experimentar combinações até achar o efeito desejado.
Os parâmetros ajustados refletem fielmente o comportamento do CSS real, sem surpresas na hora de aplicar ao seu site. Além disso, você pode explorar presets prontos para estilos de sombra populares e personalizá-los para otimizar seu workflow.
Crie múltiplas camadas de sombras
Diferente de outras ferramentas, aqui você pode adicionar várias camadas de box-shadow separadas por vírgula, simulando profundidade e realismo. Cada camada é configurada individualmente, com ajuste separado de cor, opacidade, desfoque e espalhamento.
Camadas múltiplas permitem resultados mais sofisticados, como sombras internas e externas combinadas, luz lateral ou até efeitos de "glow". Ao copiar o CSS gerado, todas as camadas são incluídas no código final, pronto para uso.
Código pronto para usar, com privacidade total
O código CSS é gerado e exibido imediatamente, e você pode copiar para a área de transferência com um clique. Todas as operações acontecem localmente no seu navegador — nenhum dado ou imagem é enviado para servidores externos.
Limitações: sombras com muitos elementos ou valores extremos de desfoque podem impactar o desempenho da sua página. A ferramenta não exporta imagens, apenas código CSS utilizável em qualquer projeto web.
Perguntas frequentes
Como deixar a sombra mais realista?
Use múltiplas camadas de <code>box-shadow</code> com diferentes opacidades e desfoques. Ajustar o spread e variar as cores entre camadas também ajuda a criar uma transição suave, simulando luz natural.
Posso combinar várias sombras no mesmo elemento?
Sim, basta adicionar camadas no gerador. Cada camada é separada por vírgula no código CSS, e você visualiza o resultado ao vivo para ajustar cada uma delas.
Sombras complexas deixam o site mais lento?
Sombras com muitos elementos e grandes valores de blur podem impactar o desempenho, especialmente em dispositivos móveis ou animações. Use com moderação para garantir performance.
O que faz o parâmetro spread no box-shadow?
O spread define o quanto a sombra se expande além do tamanho do elemento. Valores positivos aumentam o raio da sombra, enquanto negativos reduzem o alcance em relação à borda.
Meus dados ou imagens são enviados para algum lugar?
Não, tudo é processado localmente no seu navegador. Nenhum dado, imagem ou código é enviado para servidores; sua privacidade está garantida.
Como copiar o código CSS gerado?
Clique em 'Copiar CSS' para enviar automaticamente o código para a área de transferência. Depois, cole diretamente no seu arquivo de estilos ou no editor do seu projeto.
Problema ou sugestão para esta ferramenta? Conte para nós