Categoria: Desenvolvimento
Gerador de Box Shadow em Múltiplas Camadas (CSS)
Projete um box-shadow em camadas a partir de um único conjunto de controles
Defina deslocamento, desfoque, espalhamento, cor e número de camadas, acompanhe uma prévia ao vivo e copie uma declaração box-shadow em múltiplas camadas, construída da forma como designers empilham sombras para criar profundidade real. Tudo é renderizado no seu próprio navegador.
box-shadow: 0px 4px 6px -1px rgba(23, 33, 28, 0.3), 0px 8px 12px -2px rgba(23, 33, 28, 0.26), 0px 12px 18px -2px rgba(23, 33, 28, 0.22), 0px 16px 24px -3px rgba(23, 33, 28, 0.18), 0px 20px 30px -4px rgba(23, 33, 28, 0.14);
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Uma única camada de box-shadow costuma parecer uma névoa achatada; a elevação real vem do empilhamento de várias camadas que encolhem e desaparecem à medida que se aproximam do elemento, da mesma forma que a luz ambiente se atenua. Esta ferramenta parte de um único conjunto de controles de deslocamento, desfoque, espalhamento e cor, mais um número de camadas, e deriva automaticamente essa quantidade de camadas progressivamente mais estreitas e opacas, dando uma sombra empilhada convincente sem precisar ajustar cada uma manualmente.
Como usar
- Escolha quantas camadas gerar.
- Defina deslocamento, desfoque, espalhamento, cor e opacidade da camada base.
- Copie a declaração box-shadow em múltiplas camadas gerada.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Algo é enviado para um servidor?
- Não. A prévia é uma sombra CSS desenhada pelo seu navegador e a declaração é montada na própria página.
- Como as camadas individuais são derivadas?
- Cada camada reduz proporcionalmente o deslocamento, o desfoque e o espalhamento em direção ao elemento e aumenta a opacidade conforme se aproxima, o mesmo padrão de encolher-e-esmaecer usado em sistemas de elevação construídos manualmente.
- Por que o número de camadas tem um limite?
- A partir de cinco ou seis camadas a diferença visual se torna insignificante enquanto o CSS continua crescendo, então o controle é limitado para manter a saída fácil de ler e colar.