Gerador de Sombra CSS
Crie sombras CSS (box-shadow) com prévia em tempo real. Configure múltiplas camadas de sombra, cor, desfoque, expansão e inset. Copie o código CSS.
Como usar?
Mexa nos parâmetros de cada camada de sombra e o resultado aparece em tempo real. Combinar várias camadas rende efeitos mais elaborados. Se você ligar a opção inset, a sombra passa a ser interna, com aspecto de recorte.
Crie sombras CSS com prévia ao vivo
A propriedade box-shadow dá relevo a cartões, botões e caixas. Acertar os valores na mão, porém, vira um exercício de tentativa e erro, entre deslocamento, desfoque e expansão. Aqui o gerador mostra a sombra mudando em tempo real à medida que você mexe em cada parâmetro.
Você controla cor, desfoque, expansão e deslocamento, liga ou desliga o modo inset (a sombra interna) e ainda empilha várias camadas quando quer um efeito mais elaborado. Quando o resultado chega no ponto que você queria, um clique copia o código CSS pronto para colar no projeto.
Tudo acontece no navegador. É uma ferramenta direta para designers e desenvolvedores darem profundidade à interface sem ter de decorar a sintaxe da propriedade.
Ferramentas Relacionadas
Gerador de Gradiente CSS
Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.
Gerador de Neumorphism CSS
Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.
Gerador de Glassmorphism CSS
Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.