Soft CSS Box Shadow – Código pronto
Crie código CSS box-shadow visualmente: controles deslizantes para deslocamento, desfoque, propagação, cor com opacidade, modo de inserção e até quatro camadas com visualização ao vivo.
Resultado
Esta página abre o gerador de sombra de caixa pré-carregado com uma sombra suave: sem deslocamento horizontal, 8px para baixo, um desfoque generoso de 24px e uma baixa opacidade de preto de 12%. O cartão de visualização o renderiza imediatamente – mova qualquer controle deslizante e a linha CSS segue em tempo real.
Sombras suaves são o carro-chefe das interfaces modernas. Um grande desfoque combinado com baixa opacidade tira um cartão da página sem desenhar um contorno rígido, e é por isso que a maioria dos sistemas de design mantém suas sombras de elevação exatamente nesta faixa, em vez das sombras densas e escuras do design plano inicial.
Copie a linha box-shadow diretamente em sua folha de estilo ou empilhe até mais três camadas para obter uma elevação mais rica. O gerador é executado inteiramente no seu navegador – nada é carregado em lugar nenhum.