Por que sombras CSS multicamadas parecem mais realistas do que sombras de camada única?▼
Sombras de camada única no CSS dependem de um desfoque gaussiano linear uniforme que não reproduz a física óptica do mundo real. Na física da luz, um objeto iluminado gera duas zonas de sombra distintas: uma umbra de contato escura e nítida sob a base (oclusão ambiente) e uma penumbra difusa, suave e ampla que se dissipa gradualmente. Ao empilhar de 3 a 6 camadas de box-shadow com decaimento exponencial de distância e desfoque (ex.: y_i = d * (i/n)^2.2, blur_i = b * (i/n)^2.0, alpha_i = alpha_max * e^(-0.6i)), simula-se com precisão tanto a oclusão ambiente quanto a dispersão volumétrica da luz.
Qual é a diferença entre CSS box-shadow e filter: drop-shadow()?▼
A propriedade CSS box-shadow atua estritamente sobre a caixa retangular (border-box) do elemento e seu border-radius, ignorando transparências internas e pseudo-elementos. Em contrapartida, filter: drop-shadow() avalia a máscara real do canal alfa dos pixels renderizados, projetando sombras nos contornos transparentes de PNGs, vetores SVG inline e formas criadas com clip-path. No entanto, filter: drop-shadow() não tem suporte ao parâmetro spread-radius nem à palavra-chave inset, além de exigir maior custo computacional de composição na GPU quando múltiplos filtros são encadeados.
Como evitar sombras cinzas opacas sobre fundos coloridos no CSS?▼
Sombras em preto puro (rgba(0, 0, 0, 0.15)) sobre fundos coloridos criam contornos cinzentos e visualmente sujos porque a mesclagem alfa no espaço sRGB reduz a cromaticidade do fundo. Para gerar sombras ricas e vívidas, capture a tonalidade do fundo, desloque-a entre 10° e 20° em direção a um tom complementar mais escuro (por exemplo, movendo um fundo laranja para um tom sépia avermelhado profundo, ou um fundo azul para azul-marinho meia-noite), aumente a saturação em 15% a 30% e reduza a luminosidade para 10% a 20%. No CSS moderno, isso pode ser automatizado com color-mix(in oklch, var(--bg-color), black 80%).
Como otimizar animações com box-shadow para 60fps sem sobrecarregar a GPU?▼
Nunca anime a propriedade box-shadow diretamente; essa prática força a CPU e a GPU do navegador a recalcular matrizes pesadas de desfoque gaussiano a cada quadro (disparando etapas custosas de Paint e Composite). Em vez disso, pré-renderize a sombra elevada em um pseudo-elemento ::after persistente com opacity: 0 inicial e anime apenas opacity e transform: translateY(-2px) nos estados :hover ou :focus. Como opacity e transform são processados inteiramente na thread do compositor da GPU sem acionar reflow (Layout) ou repintura (Paint), as animações alcançam 60fps/120fps constantes sem perda de quadros.
Qual é a escala ideal de elevação de box-shadow para sistemas de design?▼
Design systems de referência (como Material Design, Tailwind CSS e Apple HIG) organizam sombras em uma escala de elevação no eixo Z de 5 a 6 níveis: Elevação 1 (Estado de repouso de cartões/botões: 1-2px no eixo Y, 3-4px de desfoque, 5-8% de opacidade para separação sutil), Elevação 2 (Hover de cartões/botões elevados: 4-6px no eixo Y, 8-12px de desfoque, 10-12% de opacidade), Elevação 3 (Menus suspensos/popovers: 8-12px no eixo Y, 16-24px de desfoque, 12-15% de opacidade), Elevação 4 (Diálogos modais/drawers: 16-24px no eixo Y, 32-48px de desfoque, 15-20% de opacidade) e Elevação 5 (Toasts/alertas de sistema flutuantes: 24-32px no eixo Y, 48-64px de desfoque, 20-25% de opacidade com brilho perimétrico ambiente).
O CSS box-shadow afeta o layout da página ou dispara reflow?▼
Não, box-shadow não interfere na geometria do fluxo de layout do documento, não altera as dimensões do bounding box do elemento e não dispara recálculos de reflow (Layout) no DOM quando aplicado ou alternado. Contudo, como as sombras são renderizadas fora do modelo de caixa (box model), valores elevados de blur ou spread podem sobrepor elementos adjacentes, ocultar textos ou gerar barras de rolagem horizontal se a sombra ultrapassar a largura da viewport (a menos que seja contida por overflow: hidden).
