CSS Box Shadow Generator

La guía completa para las sombras de cuadros CSS

La propiedad CSS box-shadow es una de las herramientas más poderosas en el arsenal de un diseñador web. Agrega profundidad, establece una jerarquía visual y convierte diseños planos en interfaces táctiles e interactivas. Ya sea que esté creando capas de elevación sutiles para una interfaz de usuario de Material Design o creando componentes de interfaz de usuario suaves "neumórficos" modernos, dominar las sombras de los cuadros es esencial. Nuestro generador de sombras de cuadro CSS gratuito le permite diseñar visualmente sombras complejas y capturar instantáneamente el CSS para varios navegadores.

Comprensión de la sintaxis de la sombra del cuadro

La propiedad CSS estándar box-shadow acepta hasta seis valores:

box-shadow: [desplazamiento horizontal] [desplazamiento vertical] [radio de desenfoque] [radio de extensión] [color] [recuadro];

• Desplazamiento horizontal: obligatorio. Un valor positivo empuja la sombra hacia la derecha; lo negativo lo empuja hacia la izquierda.
• Desplazamiento vertical: obligatorio. Un valor positivo empuja la sombra hacia abajo; lo negativo lo empuja hacia arriba.
• Radio de desenfoque: Opcional (el valor predeterminado es 0). Los valores más altos hacen que la sombra sea más grande y más suave. No puede ser negativo.
• Radio de extensión: Opcional (el valor predeterminado es 0). Los valores positivos amplían el tamaño de la sombra en todas direcciones; los valores negativos lo reducen.
• Color: Opcional (el valor predeterminado es el color del texto). Generalmente un valor RGBA para transparencia (p. ej., rgba(0, 0, 0, 0.2)).
• Recuadro: Palabra clave opcional. Si está presente, dibuja la sombra dentro del borde del elemento.

Sombras iniciales versus sombras insertadas

Inicio (Sombras paralelas): Este es el valor predeterminado. La sombra se dibuja fuera del elemento, lo que hace que parezca que el elemento flota sobre la página. Se utiliza para modales, tarjetas, botones de acción flotante (FAB) y menús desplegables.

Sombras insertadas: Al agregar la palabra clave inset, la sombra se dibuja dentro del elemento. Esto crea una apariencia "presionada" o sangría. Se utiliza para entradas de formularios, estados de botones presionados y seguimientos de barras de progreso.

Sombras de cuadros múltiples

Puedes aplicar varias sombras a un solo elemento separándolos con comas. Este es el secreto para crear sombras suaves y muy realistas. Una sola sombra a menudo parece dura, pero la aplicación de 3 a 5 sombras muy tenues crea un efecto hermoso y difuso.

caja-sombra: 
0 1px 2px rgba(0,0,0,0.07), 
0 2px 4px rgba(0,0,0,0.07), 
0 4px 8px rgba(0,0,0,0.07), 
0 8px 16px rgba(0,0,0,0.07);

Consejos para el rendimiento de Box Shadow

Si bien las sombras se ven geniales, su renderización es costosa desde el punto de vista computacional para los navegadores. Durante las animaciones (como desplazarse o pasar el cursor), las sombras intensas pueden provocar retrasos.

• No animes box-shadow directamente: Animar box-shadow obliga al navegador a volver a pintar el elemento en cada fotograma.
• La forma eficaz: Utilice un pseudoelemento (::after) con la sombra aplicada. En su lugar, transfiera la opacidad del pseudoelemento. La animación de opacity y transform se acelera por hardware.
• Mantenga los radios de desenfoque razonables: los radios de desenfoque masivos (por ejemplo, más de 100 píxeles) requieren una potencia de procesamiento significativa.

Tendencias de diseño: neumorfismo

El neumorfismo (UI suave) es una tendencia de diseño que se basa completamente en sombras de cuadros complejos para crear elementos que parecen extruidos del fondo. Combina una sombra clara (arriba a la izquierda) con una sombra oscura (abajo a la derecha) sobre un fondo del mismo color exacto. Puedes crear fácilmente diseños neumórficos usando nuestro generador ajustando la extensión y las sombras duales.

Utilice nuestro Box Shadow Generator gratuito para crear sombras paralelas perfectas visualmente. Para otras herramientas de generación de CSS, pruebe nuestro generador de degradado CSS y generador de paleta de colores.