Generador de sombras de caja CSS

El generador de sombras de cajas CSS es un editor visual de la propiedad CSS Box-Shadow. Ajusta el desplazamiento, el radio de desenfoque, el radio de propagación, el color y la opacidad con los controles deslizantes y ve el resultado en vivo en un elemento de vista previa, luego copia el CSS exacto. En lugar de adivinar los valores de píxeles y recargar la página, moldea la sombra directamente y lee el código que produce.

Abra este generador de sombras de caja CSS y se inicia en el ajuste preestablecido de la Tarjeta, dos capas que se copian como sombras de caja: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a; El control deslizante Opacity está horneado en el color hexadecimal, por lo que el 10% se convierte en 1a al final. Haga clic en el ajuste preestablecido interior y la declaración cambiará a sombra de caja: recuadro 0px 2px 4px 0px #00000033;, la mirada del botón presionado. Agregar capa agrega una sombra en 0px 4px 6px 0px #00000033, listado en último lugar y pintado debajo de los demás.

La propiedad de caja-sombra es engañosamente profunda. Una sola declaración puede apilar varias sombras, cada una con sus propios desplazamientos, desenfoque, difusión, color y una palabra clave insertada opcional que pinta la sombra dentro del elemento en lugar de fuera. Las sombras de interfaz reales casi siempre usan dos o más capas para lucir natural, lo que es tedioso de escribir a mano. Esta herramienta administra las capas para usted y genera una declaración de especificaciones válida en el orden correcto separado por comas.

Todo sucede en su navegador. Elija un preset, ajuste las capas, cambie la vista previa entre fondos claros y oscuros y copie la propiedad estándar o un bloque que también incluya el prefijo -webkit-. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.

Las sombras se pintan fuera de la caja y no ocupan espacio, por lo que nunca empujan a los vecinos y serán recortadas por cualquier ancestro con desbordamiento oculto. Spread es el valor menos comprendido: crece o reduce la forma de la sombra antes de desenfocarla, por lo que una extensión positiva con cero desenfoque proporciona un contorno desplazado sólido, que es como se falsifican los efectos de borde sin afectar el diseño. Inset mueve la sombra dentro del elemento, útil para estados presionados y brillos internos. La superposición de varias sombras con un desplazamiento y desenfoque crecientes es la profundidad convincente que se construye, ya que un único desenfoque grande se lee como niebla en lugar de sombra. Cada capa cuesta tiempo de renderizado, y las sombras que se vuelven a pintar durante el desplazamiento o la animación son una fuente común de jank en dispositivos de menor potencia.