Crie sombras suaves e realistas com controles visuais e código pronto para colar.
A propriedade CSS box-shadow é um dos pilares do design de interfaces contemporâneo para conferir profundidade espacial, relevo tátil e sensação de elevação a cartões, botões e modais. Criar sombras elegantes e orgânicas exige a calibração harmoniosa de cinco parâmetros fundamentais: deslocamento horizontal (X), deslocamento vertical (Y), raio de desfoque (blur), raio de dispersão (spread) e canais de cor com opacidade alfa (RGBA).
Um designer de produto desenvolve um cartão de interface (card) que deve passar a sensação de estar sutilmente suspenso sobre o fundo da tela. Ao manipular os controles visuais interativos, define uma sombra principal com deslocamento horizontal de 0px, deslocamento vertical de 12px, desfoque suave de 24px e dispersão negativa de -4px sob uma cor RGBA(0, 0, 0, 0,08). Combinando uma segunda camada de sombra sutil de apoio (deslocamento Y de 4px e desfoque de 8px a 4% de opacidade), a interface ganha um efeito realista de elevação espacial sem contornos pesados, gerando o snippet CSS perfeitamente compatível com todos os navegadores modernos pronto para cópia.
A pré-visualização gráfica e a renderização dos estilos rodam 100% no seu navegador. Nenhuma paleta de cores ou código de interface de seus projetos de design é transferido para a rede.
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
Diretiva CSS3 que projeta uma ou mais sombras exteriores ou interiores com controle contínuo de desfoque gaussiano e expansão dimensional.