Generador de Sombras CSS

El radio de desenfoque se especifica en píxeles CSS, no en píxeles de dispositivo. En una pantalla retina 2×, un desenfoque de 4 px se rasteriza a 8 píxeles de dispositivo, lo que puede mostrar banding si la superficie subyacente usa un búfer de baja profundidad de bits. Los navegadores modernos asumen sRGB / 8 bits por canal por defecto. Para gradientes más suaves, cambia la superficie de renderizado a un canvas con gamut más amplio o usa filter: drop-shadow, que compone de forma distinta. Para la mayoría de la interfaz, el valor por defecto está bien. Fuente: CSS Backgrounds and Borders Module Level 3 §7 más documentación de renderizado de Skia.

box-shadow sigue la caja CSS del elemento (el borde rectangular exterior), así que un PNG transparente dentro de un div produce una sombra rectangular alrededor del div, no de la imagen visible. filter: drop-shadow respeta el canal alfa del contenido del elemento, así que el mismo PNG produce una sombra con la forma de los píxeles visibles. Rendimiento: box-shadow se pinta en CPU en una operación multi-pase por Skia; drop-shadow compone de forma distinta y puede usar aceleración GPU en navegadores capaces. Usa drop-shadow para iconos y máscaras PNG; usa box-shadow para tarjetas y elevación rectangular.

transform y opacity se componen en GPU como parte del paso del compositor de capas, así que el navegador los interpola por frame sin repintar píxeles. box-shadow es parte de la fase de pintado: cada frame de la animación re-rasteriza los píxeles de la sombra en CPU vía Skia (Blink) o bibliotecas equivalentes en Firefox y Safari. El workaround estándar es el 'truco de dos sombras': renderizar dos elementos apilados (o pseudo-elementos) con sombras estáticas distintas, y luego animar la opacidad del superior. Fuente: McAnlis (2013) 'CSS paint times and page render weight' en web.dev.

Las versiones de Safari anteriores a 2012 (móvil y escritorio) embarcaron box-shadow bajo el prefijo experimental -webkit-. Tras Safari 5.1 (julio 2011), la propiedad sin prefijo es la predeterminada. Añadir -webkit-box-shadow hoy tiene coste prácticamente cero y beneficio marginal de compatibilidad para la cola larga de navegadores Android atados a forks antiguos de WebKit (algunas operadoras, quioscos, webviews integrados). La mayoría de guías de estilo modernas lo eliminan. El generador emite ambos para seguridad pega-y-listo con targets legacy.

Material Design 3 (m3.material.io) define seis niveles de elevación (Nivel 0 al Nivel 5), cada uno asociado a un rol funcional: Nivel 0 es plano (sin sombra), Nivel 1 es una tarjeta apoyada en una superficie, Nivel 3 es un botón de acción flotante o diálogo, y los Niveles 4–5 están reservados para estados hover y de arrastre. M3 superpone un overlay de color tonal sobre la sombra, así que una superficie Nivel 1 en tema oscuro también recibe un matiz tonal ligeramente más claro. Los valores dp exactos y tokens de sombra por nivel se especifican en la referencia de tokens M3. M1 (2014) usaba una escala distinta 0–24 dp con sombras solas.