Sombra de cuadro CSS insertada: código listo para usar
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 de sombras de cuadro con la casilla de verificación ya marcada, por lo que la sombra se dibuja dentro del elemento en lugar de detrás de él. La tarjeta de vista previa muestra el efecto hundido a la vez y cada control deslizante sigue actualizando la línea CSS en vivo.
Las sombras insertadas son la forma en que CSS finge la profundidad hacia adentro: los estados de los botones presionados, los campos de búsqueda y los pozos de entrada, los canales de las barras de progreso y los paneles grabados dependen de ellas. Debido a que la sombra abraza el borde interior, el desenfoque y la extensión se comportan de manera ligeramente diferente que en una sombra paralela normal; los controles deslizantes aquí le permiten sentir esa diferencia de inmediato.
Cuando el aspecto hundido sea correcto, copie la línea de sombra del cuadro en su hoja de estilo. También puede combinar una capa insertada con capas exteriores normales: agregue una segunda capa y desmarque la inserción para mezclar ambas en una sola declaración.