Generador de box-shadow CSS
Crea un box-shadow de forma visual: apila tantas capas como quieras, mueve los controles deslizantes y copia un CSS limpio. Todo funciona en tu navegador; no se sube nada.
Última actualización:
Capas de sombra
La primera capa se dibuja encima. Usa las flechas para reordenar.
Capa 1
Cómo usar Generador de box-shadow CSS
- Elige un ajuste predefinido como Suave, Material 8dp o Neumorphism, o empieza con la sombra suave predeterminada.
- Selecciona una capa en la lista Capas de sombra y ajusta su desplazamiento x e y, desenfoque, expansión, opacidad y color.
- Añade capas con + Añadir capa para crear una profundidad realista; usa las flechas para reordenarlas y el ojo para ocultar una temporalmente.
- Revisa la vista previa sobre una tarjeta, un círculo o un botón, y cambia los colores de la caja y del fondo para que coincidan con tu diseño.
- Pulsa Copiar CSS y pega la declaración box-shadow en tu hoja de estilos.
Valores de box-shadow explicados
| Valor | ¿Obligatorio? | Qué hace |
|---|---|---|
inset | No | Dibuja la sombra dentro de la caja del borde en lugar de fuera. |
| offset-x | Sí | Mueve la sombra a la derecha (positivo) o a la izquierda (negativo). |
| offset-y | Sí | Mueve la sombra hacia abajo (positivo) o hacia arriba (negativo). |
| blur-radius | No (0) | Suaviza el borde. No puede ser negativo. 0 da un borde nítido. |
| spread-radius | No (0) | Expande (positivo) o contrae (negativo) la sombra antes de desenfocarla. |
| color | No (currentColor) | Cualquier color CSS. Usa rgba() o hex de 8 dígitos para la transparencia. |
Ejemplo: box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); mueve la sombra 10px hacia abajo, la desenfoca a lo largo de 30px y la contrae 5px por cada lado, de modo que se ve sobre todo debajo del elemento: el aspecto suave de "tarjeta" que usan muchos sistemas de diseño.
Sombras de elevación de Material Design
Material Design (versión 2) crea cada elevación con tres capas: una umbra (20% de opacidad), una penumbra (14%) y una sombra ambiental (12%). Estos son los valores que usan los ajustes predefinidos:
| Elevación | Componente típico | box-shadow |
|---|---|---|
| 2dp | Botón elevado, tarjeta en reposo | 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12) |
| 4dp | Barra de aplicación | 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12) |
| 8dp | Menú, tarjeta elevada | 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) |
| 16dp | Panel de navegación | 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12) |
| 24dp | Cuadro de diálogo | 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12) |
Consejos para sombras más atractivas
- La luz viene de arriba: mantén offset-x cerca de 0 y usa un offset-y positivo para que todas las sombras de la página coincidan.
- Apila en lugar de agrandar: varias sombras pequeñas que duplican su desplazamiento y desenfoque (1, 2, 4, 8, 16px) se ven más suaves que un solo desenfoque grande. Prueba el ajuste En capas.
- Tiñe la sombra: sobre fondos de color, usa un tono más oscuro del color de fondo en lugar de negro puro para un resultado más rico y menos turbio.
- Mantén la opacidad baja: la mayoría de las sombras de interfaz están entre el 8% y el 25% de opacidad.
- Efectos hover suaves: añade
transition: box-shadow .2s easey cambia a una elevación mayor en:hover. Cuando termines tu hoja de estilos, ordénala con el Formateador CSS o redúcela con el Minificador CSS.
Preguntas frecuentes
¿Cuál es la sintaxis de box-shadow?
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Los dos desplazamientos son obligatorios; el desenfoque es 0 por defecto (un borde nítido), la expansión es 0 por defecto e inset la convierte en una sombra interior. Separa varias sombras con comas.
¿Cómo se apilan varias sombras box-shadow?
La primera sombra de la lista separada por comas se pinta encima y cada una de las siguientes queda debajo. Apilar de dos a cinco sombras con desplazamiento y desenfoque crecientes da un resultado más suave y natural que una sola sombra grande.
¿Cuál es la diferencia entre desenfoque (blur) y expansión (spread)?
El desenfoque suaviza el borde de la sombra: un valor mayor la hace más difusa. La expansión agranda (positiva) o reduce (negativa) la sombra antes de desenfocarla. Una expansión negativa con un desenfoque grande es el truco clásico para una sombra suave que solo se ve debajo de un elemento.
¿Cómo hago una sombra neumorphism (soft UI)?
Dale al elemento el mismo color que su fondo y añade dos sombras: una más oscura desplazada hacia abajo y a la derecha (por ejemplo, 9px 9px 16px con un color gris azulado) y otra clara o blanca desplazada hacia arriba y a la izquierda (-9px -9px 16px). El ajuste Neumorphism hace exactamente eso; añade inset para el efecto presionado.
¿box-shadow afecta al diseño o al rendimiento?
No, box-shadow nunca cambia el tamaño ni la posición de un elemento, así que no mueve otros elementos. Las sombras muy grandes y desenfocadas en muchos elementos, o animar box-shadow, pueden costar tiempo de pintado; para efectos hover, considera animar la opacidad de un pseudoelemento que lleve la sombra.
¿Todavía necesito el prefijo -webkit-box-shadow?
No para ningún navegador actual. box-shadow sin prefijo funciona en Chrome, Firefox, Safari y Edge desde hace más de una década. La línea -webkit- solo es útil para navegadores Android e iOS muy antiguos, por eso está desactivada por defecto.
¿Cuál es la diferencia entre box-shadow y filter: drop-shadow()?
box-shadow sigue la caja del elemento (incluido border-radius) y admite spread e inset. filter: drop-shadow() sigue los píxeles visibles reales, así que se ajusta a PNG transparentes y formas SVG, pero no tiene spread ni inset y solo admite una sombra por función.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.