Generador de box-shadow

Cómo usar el generador de box-shadow

1. Parte de un ajuste predefinido o quédate con la sombra Suave por defecto. La fila de Ajustes predefinidos ofrece Suave, Dura, Por capas, Elevación, Neumorfismo, Interior y Resplandor.
2. En Capas de sombra, haz clic en una capa para seleccionarla. Puedes moverla con Subir y Bajar, o borrarla con Eliminar. Añadir capa duplica la capa seleccionada para que puedas retocar una copia.
3. Edita la capa en Editar la capa seleccionada: arrastra el punto del panel Desplazamiento o usa los deslizadores y campos numéricos de Desplazamiento horizontal (px), Desplazamiento vertical (px), Desenfoque (px) y Expansión (px).
4. Elige el Color de la sombra con el selector o escribe cualquier color CSS en el campo de código, y ajusta la Opacidad (%). Marca Inset (sombra interior) para dibujar la sombra dentro de la caja.
5. Cambia los Ajustes de la vista previa (Color de la caja, Color de fondo, Radio de las esquinas (px)) para ver la sombra con tus colores reales. Solo afectan a la vista previa.
6. Copia la declaración del Código CSS con Copiar.

Teclado: selecciona el punto del panel Desplazamiento y usa las flechas para moverlo 1 px, o 10 px con Mayús.

Cómo funciona box-shadow

La sintaxis de una sombra es box-shadow: [inset] x y blur spread color.

• x e y desplazan la sombra hacia la derecha y hacia abajo. Los valores negativos la mueven a la izquierda y hacia arriba. Una fuente de luz por encima del elemento implica una y positiva.
• El desenfoque (blur) suaviza el borde. No puede ser negativo. Con 0 obtienes una copia de la caja con bordes nítidos.
• La expansión (spread) agranda (valor positivo) o encoge (negativo) la sombra antes de desenfocarla. Una expansión negativa con una y grande mantiene la sombra bajo el elemento en lugar de a su alrededor.
• El color suele llevar transparencia. La herramienta escribe los colores opacos en HEX y los translúcidos en rgba(), que entienden todos los navegadores. Si escribes un color que ya tiene canal alfa, la Opacidad (%) lo multiplica.
• inset coloca la sombra dentro del borde, como si la caja estuviera hundida en la página.

La sombra sigue el border-radius del elemento y nunca altera el diseño: no ocupa espacio ni provoca barras de desplazamiento.

¿Por qué combinar varias sombras?

Las sombras reales no son un único rectángulo desenfocado. Justo debajo del objeto hay una sombra pequeña, oscura y ceñida, y otra grande, tenue y difusa se extiende más lejos. Apilar de dos a cinco capas imita este efecto y resulta mucho más natural que una sola sombra pesada. El ajuste Por capas duplica el desplazamiento y el desenfoque en cada paso con una opacidad baja, una técnica popularizada por muchos sistemas de diseño. Elevación imita las sombras de tres capas de Material Design.

La primera capa de la lista se pinta encima de las demás, igual que en el valor CSS. El orden importa sobre todo cuando mezclas sombras interiores y exteriores o usas colores intensos.

Neumorfismo

El neumorfismo («soft UI») aplica dos sombras a un elemento del mismo color que su fondo: una oscura desplazada hacia abajo y a la derecha, y otra clara desplazada hacia arriba y a la izquierda. El ajuste Neumorfismo usa #e0e5ec para ambos colores. Ten en cuenta que este estilo tiene poco contraste, así que los botones creados con él necesitan un estado de foco bien visible y etiquetas legibles.