Gerador de UUID
Gere UUIDs aleatórios em lote.
Gerador de sombra CSS (box-shadow)
Ajuste uma sombra com controles deslizantes, empilhe várias camadas e copie o CSS.
Seus arquivos ficam no seu dispositivo
Como funciona
- 1Mova os controles de deslocamento, desfoque e espalhamento.
- 2Escolha uma cor e a opacidade. Marque Inset para uma sombra interna.
- 3Adicione camadas para criar uma sombra mais suave e natural.
- 4Copie o CSS.
O que cada opção faz
- Deslocamentos
- Distância horizontal e vertical da sombra em relação à caixa. Valores negativos vão para a esquerda e para cima.
- Desfoque
- O quanto a borda é suave. Zero dá uma borda nítida.
- Espalhamento
- Aumenta ou reduz a sombra antes do desfoque. Um espalhamento negativo impede que um desfoque grande vaze pelos lados.
- Inset
- Desenha a sombra dentro da caixa, como um campo pressionado.
- Camadas
- Várias sombras são desenhadas juntas. Duas ou três camadas sutis parecem mais naturais que uma só pesada.
Privacidade
Tudo roda no seu navegador. Nada do que você digita é enviado a um servidor.
Perguntas frequentes
Por que usar mais de uma camada de sombra?
Sombras reais são nítidas perto do objeto e suaves longe dele. Uma sombra pequena e definida mais uma grande e suave imita isso, o que fica mais refinado que um único desfoque.
O box-shadow acompanha cantos arredondados?
Sim, ele acompanha o border-radius do elemento. O controle de raio mostra isso e é incluído no CSS copiado.
Desfoques grandes deixam a página lenta?
Algumas sombras estáticas não causam problema. Muitas sombras grandes e desfocadas, ou animá-las, podem pesar em celulares fracos. Anime a opacidade de um pseudo-elemento.
Qual a diferença para o drop-shadow()?
O box-shadow acompanha a caixa retangular. O filtro drop-shadow() acompanha a forma visível, incluindo bordas transparentes de PNG e SVG.
Posso usar o resultado no Tailwind ou em outras ferramentas?
O valor depois de box-shadow: é CSS comum. No Tailwind, coloque-o em um valor arbitrário, trocando os espaços por sublinhados.