Colección de sombras de caja

• Copia instantánea de CSS de box-shadow: nuestra colección te permite copiar cualquier valor CSS preajustado con un clic. Cada tarjeta muestra una vista previa en vivo de la sombra aplicada a un elemento real: sin adivinar, sin ajustes manuales, solo copiar y pegar en tu proyecto.
• Colección de sombras de caja online segura: la colección online se ejecuta por completo en tu navegador. No se envía ningún dato a ningún servidor: tu flujo de diseño se mantiene totalmente privado y funciona sin conexión una vez cargada la página.
• Más de 40 preajustes en 8 categorías: explora sombras de elevación, Soft UI (neumorfismo), coloreadas, internas, por capas, brillo, nítidas y minimalistas. Cada categoría cubre un patrón de diseño distinto para que encuentres el box-shadow adecuado en cualquier contexto de interfaz.
• 100 % gratis, sin registro: usa la colección de sombras de caja gratis, sin cuenta, sin plan premium y sin límites de uso. Busca, filtra, previsualiza y copia tantas sombras como necesites para cualquier proyecto: totalmente gratis para siempre.

• Estilizado de tarjetas y paneles de interfaz: aplica la sombra de elevación adecuada a tarjetas, paneles y contenedores de contenido. La colección ofrece una escala de elevación completa de XS a 2XL para que puedas igualar Material Design, Tailwind o los tokens de tu propio sistema de diseño.
• Profundidad de botones y CTA: añade profundidad a botones principales y elementos de llamada a la acción usando sombras coloreadas o por capas. La colección incluye sombras coloreadas en índigo, azul, verde y morado que combinan directamente con paletas de marca habituales.
• Efectos de brillo para modo oscuro: usa los preajustes de la categoría brillo para resaltados tipo neón sobre fondos oscuros. La colección incluye sombras de brillo en blanco, índigo, cian, verde, rosa y ámbar optimizadas para superficies de interfaz en modo oscuro.
• Soft UI y neumorfismo: crea interfaces neumórficas con los preajustes Soft UI: variantes elevadas, presionadas, cóncavas y planas tanto para fondos claros como oscuros. La colección incluye valores listos para los patrones neumórficos más comunes.
• Estilizado de campos y formularios: usa sombras internas y minimalistas para campos de entrada, áreas de texto y contenedores de formularios. La colección incluye sombras internas sutiles, anillos de foco y sombras que sustituyen bordes para un diseño de formularios accesible y pulido.
• Documentación del sistema de diseño: copia los valores de sombra directamente en los archivos de tokens de tu sistema de diseño, la configuración de Tailwind o las propiedades personalizadas de CSS. La colección ofrece preajustes nombrados y categorizados que encajan bien con las convenciones de nombres de tokens.

La propiedad box-shadow de CSS añade uno o varios efectos de sombra a la caja de un elemento. Cada sombra se define por un desplazamiento (X e Y), un radio de desenfoque, un radio de expansión opcional, un color y la palabra clave opcional inset. Se pueden superponer varias sombras separándolas con comas, creando efectos de profundidad que van desde una elevación sutil hasta brillos llamativos. Nuestra colección de sombras de caja ofrece más de 40 preajustes listos para usar, para que encuentres el valor box-shadow adecuado sin escribirlo desde cero.

1. Explora o busca: usa las píldoras de filtro por categoría para explorar los preajustes de elevación, Soft UI, coloreadas, internas, por capas, brillo, nítidas y minimalistas, o escribe en el cuadro de búsqueda para encontrar una sombra por nombre, categoría o valor CSS.
2. Previsualiza en vivo: cada tarjeta de la colección muestra un elemento de vista previa en vivo con la sombra exacta aplicada, para que veas cómo quedará antes de copiarla.
3. Copia y usa: haz clic en el botón de copiar de cualquier tarjeta para copiar la declaración completa box-shadow: …;, o haz clic directamente en el valor CSS para copiar solo el valor. Pégalo en tu CSS, en la configuración de Tailwind o en tu archivo de tokens de diseño.

• Escala de elevación: sombras de XS a 2XL siguiendo las convenciones de elevación de Material Design y Tailwind para una jerarquía de profundidad coherente.
• Soft UI / neumorfismo: sombras neumórficas elevadas, presionadas, cóncavas y planas tanto para fondos claros como oscuros.
• Coloreadas y brillo: sombras del color de la marca y efectos de brillo neón para interfaces en modo oscuro, CTA e indicadores de estado.
• Internas, nítidas y minimalistas: sombras internas para campos de formulario, sombras nítidas para diseños brutalistas y sombras minimalistas para bordes y anillos de foco.

La propiedad box-shadow es compatible con todos los navegadores modernos, y lo es desde IE9. Las sombras multicapa (separadas por comas) están igual de bien soportadas. Toda la exploración, búsqueda y copia de la colección de sombras de caja se ejecuta localmente en tu navegador: nunca se envía ningún dato a ningún servidor.