Card Shadow CSS: código sutil de sombra de cuadro
Cree visualmente código CSS de sombra de cuadro: controles deslizantes para desplazamiento, desenfoque, extensión, color con opacidad, modo de inserción y hasta cuatro capas con vista previa en vivo.
Resultado
Esta página abre el generador preestablecido de sombra de cuadro en una sombra de tarjeta clásica: 2 píxeles hacia abajo, desenfoque de 8 píxeles, 15 % de opacidad en negro. Es deliberadamente silencioso (lo suficiente como para separar una tarjeta de la página sin anunciarse) y la vista previa muestra exactamente cuán silencioso es.
Este rango corresponde a los pasos de elevación más bajos en la mayoría de los sistemas de diseño: tarjetas de lista, menús desplegables, ventanas emergentes y filas de tablas al pasar el mouse. Si necesita una elevación más fuerte para los modales o los paneles flotantes, aumente el desplazamiento Y y difumínelos; deberían crecer en proporción para mantener la fuente de luz creíble.
Copie la línea de sombra del cuadro en los estilos de sus componentes o duplíquela como una segunda capa con un desenfoque más intenso para agregar definición de borde. La herramienta es gratuita y se ejecuta completamente en su navegador.