Generador de Box Shadow CSS 2025 | Crear Sombras Personalizadas con Múltiples Capas

Generador de Box Shadow CSS: Guía Completa para Crear Sombras Profesionales 2025

¿Quieres añadir profundidad y dimensión a tus diseños web? La propiedad CSS box-shadow es una de las herramientas más poderosas para crear interfaces visuales atractivas. En esta guía completa, aprenderás todo sobre box-shadow y cómo usar nuestro generador gratuito para crear sombras profesionales con múltiples capas.

¿Qué es box-shadow y por qué es importante?

Entendiendo box-shadow

La propiedad CSS box-shadow permite añadir efectos de sombra alrededor del marco de un elemento. A diferencia de las sombras simples de antaño, las sombras modernas pueden:

1. Crear profundidad: Dar sensación de elevación y jerarquía visual
2. Mejorar la UX: Indicar elementos interactivos y estados hover
3. Establecer focus: Dirigir la atención del usuario
4. Diseño Material: Implementar los principios de Material Design
5. Efectos creativos: Crear efectos 3D, neón, y más

Importancia en el diseño web moderno

1. Jerarquía visual

1. Las sombras ayudan a establecer qué elementos están "más cerca" del usuario
2. Permiten crear capas visuales sin usar fondos
3. Facilitan la navegación visual de la interfaz

2. Feedback interactivo

1. Estados hover más evidentes
2. Indicadores de elementos clicables
3. Transiciones suaves entre estados

3. Estética profesional

1. Interfaces modernas y pulidas
2. Coherencia con tendencias de diseño actuales
3. Diferenciación de la competencia

Sintaxis de box-shadow: Lo básico

Sintaxis completa

css
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

Parámetros explicados

1. inset (Opcional)

css
/ Sombra exterior (predeterminada) /
.elemento {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/ Sombra interior /
.elemento-inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

Usos del inset:

1. ✅ Efectos de profundidad hacia dentro
2. ✅ Simular superficies cóncavas
3. ✅ Inputs con apariencia "hundida"
4. ✅ Botones presionados

2. offset-x (Desplazamiento horizontal)

css
/ Sombra a la derecha /
.derecha { box-shadow: 10px 0 5px rgba(0,0,0,0.2); }

/ Sombra a la izquierda /
.izquierda { box-shadow: -10px 0 5px rgba(0,0,0,0.2); }

/ Sin desplazamiento horizontal /
.centrada { box-shadow: 0 5px 5px rgba(0,0,0,0.2); }

Rangos típicos: -100px a 100px

3. offset-y (Desplazamiento vertical)

css
/ Sombra hacia abajo (más común) /
.abajo { box-shadow: 0 10px 5px rgba(0,0,0,0.2); }

/ Sombra hacia arriba /
.arriba { box-shadow: 0 -10px 5px rgba(0,0,0,0.2); }

Rangos típicos: -100px a 100px

4. blur-radius (Radio de desenfoque)

css
/ Sin desenfoque (sombra nítida) /
.nitida { box-shadow: 0 4px 0 rgba(0,0,0,0.2); }

/ Desenfoque suave /
.suave { box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

/ Desenfoque muy difuso /
.difusa { box-shadow: 0 4px 40px rgba(0,0,0,0.2); }

Rangos típicos: 0 a 100px

5. spread-radius (Radio de expansión)

css
/ Sin expansión /
.normal { box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2); }

/ Expansión positiva (sombra más grande) /
.expandida { box-shadow: 0 4px 6px 5px rgba(0,0,0,0.2); }

/ Expansión negativa (sombra más pequeña) /
.reducida { box-shadow: 0 4px 6px -2px rgba(0,0,0,0.2); }

Rangos típicos: -50px a 50px

6. color (Color de la sombra)

css
/ Negro con opacidad (más común) /
.negro { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); }

/ Color de marca /
.azul { box-shadow: 0 4px 6px rgba(59, 130, 246, 0.5); }

/ Colores múltiples para efectos /
.colorido { 
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.5),
    0 0 20px rgba(0, 255, 0, 0.5),
    0 0 30px rgba(0, 0, 255, 0.5);
}

Sombras múltiples: El poder de las capas

¿Por qué usar múltiples sombras?

Una de las características más poderosas de box-shadow es la capacidad de aplicar múltiples sombras a un mismo elemento:

css
.tarjeta-profesional {
  box-shadow:
    / Sombra principal /
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    / Sombra secundaria más suave /
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

Patrones de sombras múltiples

1. Efecto de elevación (Material Design)

css
.elevacion-baja {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

.elevacion-media {
  box-shadow:
    0 10px 20px rgba(0,0,0,0.19),
    0 6px 6px rgba(0,0,0,0.23);
}

.elevacion-alta {
  box-shadow:
    0 19px 38px rgba(0,0,0,0.30),
    0 15px 12px rgba(0,0,0,0.22);
}

2. Efecto 3D

css
.efecto-3d {
  box-shadow:
    0 1px 0 #e0e0e0,
    0 2px 0 #d0d0d0,
    0 3px 0 #c0c0c0,
    0 4px 0 #b0b0b0,
    0 5px 10px rgba(0,0,0,0.4);
}

3. Efecto neón

css
.neon-azul {
  box-shadow:
    0 0 10px rgba(59, 130, 246, 0.7),
    0 0 20px rgba(59, 130, 246, 0.5),
    0 0 40px rgba(59, 130, 246, 0.3);
}

4. Sombra con borde

css
.con-borde {
  box-shadow:
    / Borde simulado /
    0 0 0 1px rgba(0,0,0,0.1),
    / Sombra principal /
    0 4px 6px rgba(0,0,0,0.1);
}

Ventajas de nuestro Generador de Box Shadow

Características principales

1. Múltiples capas ilimitadas

1. ✅ Añade tantas capas como necesites
2. ✅ Control individual por capa
3. ✅ Reordena y elimina capas fácilmente
4. ✅ Cada capa puede ser inset u outset

2. Controles intuitivos

1. 🎚️ Sliders precisos: Control fino de cada parámetro
2. 🎨 Selector de color: Paleta de colores completa
3. 👁️ Vista previa en tiempo real: Ve los cambios instantáneamente
4. 📋 Copiar código: Un click para copiar el CSS

3. Presets profesionales

Seis presets listos para usar:

Suave: Sombra sutil para elementos delicados

css
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

Media: Balance perfecto para tarjetas

css
box-shadow:
  0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -1px rgba(0, 0, 0, 0.06);

Grande: Elevación pronunciada

css
box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 20px 40px -10px rgba(0, 0, 0, 0.2);

Interna: Efecto hundido

css
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

3D: Profundidad realista

css
box-shadow:
  0 1px 0 #e0e0e0,
  0 2px 0 #d0d0d0,
  0 3px 0 #c0c0c0,
  0 4px 0 #b0b0b0,
  0 5px 10px rgba(0, 0, 0, 0.4);

Neón: Efecto de brillo

css
box-shadow:
  0 0 10px rgba(59, 130, 246, 0.7),
  0 0 20px rgba(59, 130, 246, 0.5),
  0 0 40px rgba(59, 130, 246, 0.3);

Ventajas sobre otras soluciones

Característica	Nuestro generador	Otros generadores
Capas múltiples	✅ Ilimitadas	⚠️ Limitadas o ninguna
Presets	✅ 6 profesionales	❌ Pocos o ninguno
Vista previa	✅ Tiempo real	⚠️ Básica
Opacidad	✅ Control independiente	⚠️ Limitado
Inset	✅ Por capa	⚠️ Global o ninguno
Código	✅ Optimizado	⚠️ Sin optimizar
Gratuito	✅ 100%	⚠️ Limitaciones

Casos de uso profesionales

1. Tarjetas (Cards)

Tarjeta estándar:

css
.card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow:
    0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
}

Beneficios:

1. Separa visualmente el contenido
2. Indica interactividad con hover
3. Profesional y moderno

2. Botones

Botón con profundidad:

css
.button {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.button:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05);
}

3. Inputs y formularios

Input con focus:

css
.input {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 14px;
  transition: box-shadow 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

4. Modales y diálogos

Modal elevado:

css
.modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: modalAppear 0.3s ease;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

5. Navegación

Header con sombra al scroll:

css
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  transition: box-shadow 0.3s ease;
}

.header.scrolled {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

6. Elementos de marca

Logo con efecto de brillo:

css
.logo {
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 40px rgba(59, 130, 246, 0.2),
    0 0 60px rgba(59, 130, 246, 0.1);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(59, 130, 246, 0.3),
      0 0 40px rgba(59, 130, 246, 0.2),
      0 0 60px rgba(59, 130, 246, 0.1);
  }
  50% {
    box-shadow:
      0 0 30px rgba(59, 130, 246, 0.5),
      0 0 60px rgba(59, 130, 246, 0.3),
      0 0 90px rgba(59, 130, 246, 0.2);
  }
}

Mejores prácticas y consejos

Rendimiento

1. Evita sombras complejas en elementos animados

css
/ ❌ Malo - Puede causar lag /
.elemento {
  animation: mover 1s infinite;
  box-shadow:
    0 1px 0 #e0e0e0,
    0 2px 0 #d0d0d0,
    0 3px 0 #c0c0c0,
    0 4px 0 #b0b0b0,
    0 5px 0 #a0a0a0,
    0 6px 0 #909090,
    0 7px 10px rgba(0,0,0,0.4);
}

/ ✅ Bueno - Usa transform para animaciones /
.elemento {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  animation: mover 1s infinite;
}

@keyframes mover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

2. Usa will-change para animaciones complejas

css
.elemento-animado {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

.elemento-animado:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

Accesibilidad

1. No dependas solo de sombras para indicar estados

css
/ ✅ Bueno - Combina sombra con color /
.button {
  background: #3b82f6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button:focus {
  background: #2563eb;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.5),
    0 2px 4px rgba(0,0,0,0.1);
  outline: 2px solid transparent; / Para lectores de pantalla /
}

2. Asegura contraste suficiente

css
/ ❌ Malo - Sombra demasiado sutil /
.card {
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/ ✅ Bueno - Sombra visible /
.card {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

Diseño responsive

Adapta sombras al tamaño de pantalla

css
/ Móvil - Sombras sutiles /
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/ Tablet y desktop - Sombras más pronunciadas /
@media (min-width: 768px) {
  .card {
    box-shadow:
      0 4px 6px -1px rgba(0,0,0,0.1),
      0 2px 4px -1px rgba(0,0,0,0.06);
  }
  
  .card:hover {
    box-shadow:
      0 10px 15px -3px rgba(0,0,0,0.1),
      0 4px 6px -2px rgba(0,0,0,0.05);
  }
}

Modo oscuro

Ajusta sombras para temas oscuros

css
/ Tema claro /
.card {
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/ Tema oscuro /
@media (prefers-color-scheme: dark) {
  .card {
    background: #1f2937;
    / Sombras más oscuras y pronunciadas /
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
  }
}

/ Con CSS variables /
:root {
  --shadow-color: rgba(0,0,0,0.1);
}

[data-theme="dark"] {
  --shadow-color: rgba(0,0,0,0.5);
}

.card {
  box-shadow: 0 4px 6px var(--shadow-color);
}

Errores comunes y cómo evitarlos

1. Sombras demasiado intensas

css
/ ❌ Excesivo - Parece irreal /
.card {
  box-shadow: 0 50px 100px rgba(0,0,0,0.8);
}

/ ✅ Balanceado - Natural /
.card {
  box-shadow:
    0 10px 25px -5px rgba(0,0,0,0.1),
    0 20px 40px -10px rgba(0,0,0,0.1);
}

2. Olvidar la opacidad en el color

css
/ ❌ Malo - Color sólido /
.elemento {
  box-shadow: 0 4px 6px rgb(0, 0, 0);
}

/ ✅ Bueno - Con opacidad /
.elemento {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

3. No considerar el contexto

css
/ ❌ Mismo estilo para todo /
.button, .card, .modal, .dropdown {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/ ✅ Adaptado al contexto /
.button {
  / Sombra sutil para botones /
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card {
  / Sombra estándar para tarjetas /
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.modal {
  / Sombra pronunciada para modales /
  box-shadow: 0 20px 25px rgba(0,0,0,0.15);
}

.dropdown {
  / Sombra direccional hacia abajo /
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

4. Ignorar el rendimiento

css
/ ❌ Malo - Animar box-shadow /
.elemento {
  transition: box-shadow 0.3s ease;
}

.elemento:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/ ✅ Mejor - Usar transform si es posible /
.elemento {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.elemento:hover {
  transform: translateY(-4px);
}

/ ✅ Aceptable - Animar con will-change /
.elemento {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

Compatibilidad de navegadores

Soporte actual

La propiedad box-shadow tiene excelente soporte:

Navegador	Versión mínima	Notas
Chrome	10+ (2011)	Soporte completo
Firefox	4+ (2011)	Soporte completo
Safari	5.1+ (2011)	Soporte completo
Edge	12+ (2015)	Soporte completo
Opera	10.5+ (2010)	Soporte completo
IE	9+ (2011)	Soporte completo

Prefijos antiguos (ya no necesarios)

css
/ ❌ Ya no es necesario /
.elemento {
  -webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/ ✅ Suficiente en 2025 /
.elemento {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Alternativas y complementos

filter: drop-shadow()

Para formas irregulares y transparencias:

css
/ box-shadow - Solo afecta al box /
.imagen-con-box-shadow {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/ drop-shadow - Sigue la forma del elemento /
.imagen-con-drop-shadow {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

Cuándo usar cada uno:

Propiedad	Mejor para
box-shadow	Cajas rectangulares, múltiples sombras, mejor rendimiento
drop-shadow	Imágenes PNG, SVG, formas irregulares

text-shadow

Para sombras en texto:

css
.titulo {
  text-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.05);
}

Recursos y herramientas adicionales

Generadores complementarios

1. Generador de gradientes: Para fondos combinados con sombras
2. Calculadora de contraste: Para asegurar accesibilidad
3. Generador de paletas: Para colores de sombra coherentes

Librerías de diseño

Muchas librerías incluyen sistemas de sombras predefinidos:

Tailwind CSS:

html
Sombra pequeña
Sombra estándar
Sombra media
Sombra grande
Sombra extra grande
Sombra máxima

Material-UI (MUI):

jsx
Elevación 1
Elevación 3
Elevación 6
Elevación 12

Preguntas frecuentes (FAQ)

¿Cuántas sombras puedo aplicar a un elemento?

Técnicamente no hay límite, pero por rendimiento se recomienda no exceder 5-7 sombras por elemento. En la práctica, 2-3 sombras son suficientes para la mayoría de efectos.

¿Las sombras afectan el rendimiento?

Sí, especialmente cuando se animan o se usan en muchos elementos simultáneamente. Para mejor rendimiento:

1. Usa will-change: box-shadow para elementos que se animarán
2. Considera usar transform en lugar de animar box-shadow
3. Limita el número de elementos con sombras complejas

¿Puedo animar box-shadow?

Sí, pero ten cuidado con el rendimiento:

css
.elemento {
  transition: box-shadow 0.3s ease;
}

.elemento:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

Para mejor rendimiento, considera animar transform u opacity en su lugar.

¿Cómo creo sombras de colores?

Simplemente usa el color deseado en lugar de negro:

css
.sombra-azul {
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.5);
}

.sombra-multicolor {
  box-shadow:
    0 0 10px rgba(255, 0, 0, 0.5),
    0 0 20px rgba(0, 255, 0, 0.5),
    0 0 30px rgba(0, 0, 255, 0.5);
}

¿Qué diferencia hay entre box-shadow y drop-shadow?

1. box-shadow: Sombra del cuadro delimitador (box model)
2. drop-shadow: Sombra que sigue la forma del elemento

Usa box-shadow para la mayoría de casos. Usa drop-shadow para imágenes PNG transparentes o SVG.

¿Cómo hago una sombra interior?

Usa la palabra clave inset:

css
.sombra-interior {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

¿Las sombras funcionan en elementos con border-radius?

Sí, box-shadow respeta automáticamente el border-radius del elemento:

css
.tarjeta-redondeada {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  / La sombra seguirá las esquinas redondeadas /
}

Conclusión: Domina las sombras CSS con nuestra herramienta

Las sombras CSS son una herramienta fundamental para crear interfaces modernas y profesionales. Con nuestro Generador de Box Shadow, puedes:

✨ Experimentar sin límites: Prueba diferentes combinaciones en tiempo real

🎨 Crear efectos complejos: Múltiples capas con control total

⚡ Ahorrar tiempo: Presets profesionales listos para usar

💻 Código optimizado: CSS limpio y listo para producción

🎯 Vista previa precisa: Ve exactamente cómo se verá

📋 Copiar fácilmente: Un click para tener el código

¿Listo para crear sombras profesionales?

Comienza a generar sombras ahora →

No necesitas conocimientos avanzados de CSS. Solo ajusta los controles, ve la vista previa y copia el código. Es así de simple.

Comparte esta herramienta

Si esta herramienta te ha sido útil, compártela con otros diseñadores y desarrolladores. Juntos construimos mejores herramientas para la comunidad.

Explorar más herramientas de desarrollo