Herramientas CSS/Generador de Box Shadow
Generador de Box Shadow
Crea impresionantes sombras con múltiples capas y vista previa en tiempo real
Vista Previa
#F8FAFC
Capas de Sombra
Capa 1
#0000001a
0px
4px
6px
-1px
Capa 2
#0000001a
0px
2px
4px
-2px
Presets
Loading...Guía de Sombra de Caja
Aprende a crear profundidad y dimensión con sombras CSS
¿Qué es Box Shadow?
CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Puedes crear múltiples sombras, interiores/exteriores, y controlar desenfoque, propagación y color.
Cómo Usar
- Ajusta los valores de desplazamiento X e Y
- Configura desenfoque y propagación para bordes suaves o definidos
- Elige el color y opacidad de la sombra
- Añade múltiples capas para efectos complejos
Consejos Pro
- Usa sombras interiores para efectos de botón presionado
- Combina múltiples sombras para profundidad realista
- Las sombras sutiles lucen más profesionales
Soporte del Navegador
Box-shadow es totalmente compatible en todos los navegadores modernos. No requiere prefijos de proveedor.
Preguntas frecuentes
¿Cuál es la diferencia entre box-shadow y drop-shadow?
Box-shadow aplica la sombra a toda la caja del elemento (incluyendo el borde) y mantiene una forma rectangular. En cambio, drop-shadow es parte de la propiedad filter y crea sombras que siguen la forma real del elemento (incluyendo áreas transparentes). Para imágenes PNG o formas irregulares, drop-shadow es más apropiado.
¿Cómo aplico múltiples sombras?
En CSS, declara múltiples sombras en una sola propiedad box-shadow separadas por comas. Por ejemplo: 'box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);'. Las sombras declaradas primero se muestran encima, y combinar capas crea efectos de profundidad más realistas.
¿Cuándo uso sombras inset?
Al añadir la palabra clave inset, la sombra se muestra dentro del elemento creando un efecto hundido. Se usa frecuentemente en campos de entrada, estados de botón presionado y diseños neumórficos. Usar sombras exteriores e interiores juntas puede crear elementos UI tridimensionales.
¿Cómo debo elegir el color de la sombra?
Para sombras naturales, usa colores oscuros con transparencia en lugar de negro puro (#000). Un rango de rgba(0, 0, 0, 0.1-0.3) es típico. En diseños coloridos, usar tonos más oscuros de la misma familia de colores que el fondo crea sombras armoniosas.
¿Afecta box-shadow al rendimiento?
Aplicar sombras complejas (especialmente con valores grandes de blur) a muchos elementos puede afectar el rendimiento de renderizado. Evita cambiar sombras durante scroll o animación, y si es posible, usa la propiedad will-change o imágenes de sombra como alternativa.