Crea una sombra capa a capa
Este generador de box shadow escribe la propiedad CSS <code>box-shadow</code> por ti. Apila todas las capas de sombra que necesites, ajusta el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color y la opacidad de cada una, conviértela en sombra interior (inset) y mira cómo se actualiza la caja de vista previa sobre cualquier fondo. Empieza con ajustes predefinidos de sombras suaves, elevación estilo Material, neumorfismo, desplazamientos duros y resplandores, y luego copia el CSS o una clase de Tailwind <code>shadow-[…]</code>. Pega una sombra existente para editarla. Todo funciona en tu navegador.
Cómo crear un box shadow en CSS
- 1Elige un ajuste predefinido parecido a lo que buscas, o mantén la sombra por capas predeterminada.
- 2Selecciona una capa y ajusta su desplazamiento X e Y, desenfoque, expansión, color y opacidad. Activa Inset para dibujarla dentro de la caja.
- 3Usa Añadir capa, duplica, reordena y oculta capas para combinar varias sombras.
- 4Cambia el fondo, el color de la caja, el radio de las esquinas y el tamaño de la vista previa para que coincidan con tu diseño.
- 5Copia el CSS o la clase de Tailwind.
Los valores de box-shadow explicados
- Desplazamiento X e Y
- Cuánto se mueve la sombra hacia la derecha y hacia abajo. Los valores negativos la mueven a la izquierda y hacia arriba. Una fuente de luz encima de la página implica un desplazamiento Y positivo.
- Radio de desenfoque
- Qué tan suave es el borde. 0 da una copia nítida de la caja; valores mayores reparten la sombra en un área más amplia y tenue. No puede ser negativo.
- Radio de expansión
- Agranda o reduce la sombra antes de desenfocarla. Una expansión negativa con un desenfoque grande evita que una sombra suave asome por los lados, que es el truco detrás de la mayoría de las sombras "suaves".
- Color
- Normalmente negro o un tono oscuro del fondo con baja opacidad. Teñir la sombra con el tono del fondo se ve más natural que un gris puro.
- inset
- Dibuja la sombra dentro del borde en lugar de fuera, de modo que la caja parece hundida. Puedes mezclar sombras inset y exteriores en una misma declaración.
¿Por qué apilar varias sombras?
Las sombras reales tienen un núcleo oscuro y ajustado donde el objeto casi toca la superficie y una penumbra suave y amplia más lejos. Una sola capa de box-shadow solo puede dibujar una de las dos. Apilar de dos a cinco capas con desplazamientos y desenfoques que se duplican, cada una con baja opacidad, da la profundidad suave y realista que usan los sistemas de diseño modernos. El ajuste Capas suaves es exactamente eso.
Las capas se pintan de delante hacia atrás: la primera de la lista queda arriba. Reordénalas con los botones de flecha y oculta una capa con el icono del ojo para ver qué aporta. Las capas ocultas no se incluyen en el CSS copiado.
Elevación, neumorfismo y otros estilos
Los ajustes Elevación 1–5 siguen las sombras clásicas de tarjetas de Material Design: cada nivel combina una sombra ambiental con una sombra principal, separando más la tarjeta de la página.
El neumorfismo usa dos sombras sobre una caja del mismo color que su fondo: una oscura desplazada hacia abajo y a la derecha, y una clara hacia arriba y a la izquierda. Solo funciona si los colores de la caja y del fondo coinciden, por eso el ajuste define ambos. Desplazamiento duro elimina por completo el desenfoque para un aspecto plano y brutalista, y Resplandor usa desplazamiento cero con una sombra de color para anillos de foco y efectos neón sobre fondos oscuros.
Box shadow en Tailwind CSS
Las clases integradas de Tailwind shadow-sm a shadow-2xl cubren los casos comunes. Para todo lo demás, el generador escribe un valor arbitrario como shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: los espacios se convierten en guiones bajos porque los nombres de clase no pueden contener espacios, y la clase funciona en Tailwind 3 y 4 sin editar tu configuración.
Combina una sombra con un fondo del generador de degradados CSS, o comprueba que el texto de tu tarjeta siga siendo legible con el comprobador de contraste.
Sombras y rendimiento
Los radios de desenfoque grandes los dibuja la GPU en todos los navegadores actuales y son baratos en elementos estáticos. Sin embargo, animar box-shadow repinta el elemento en cada fotograma; para animar la profundidad al pasar el ratón, pon la sombra más grande en un pseudoelemento y anima su opacity.
Preguntas frecuentes
- ¿Cuál es la sintaxis de box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. Solo los dos desplazamientos son obligatorios. Separa varias sombras con comas, por ejemplo box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- ¿Cómo hago una sombra suave y sutil?
- Usa negro con baja opacidad (10–20 %), un desenfoque grande, un desplazamiento Y pequeño y una expansión negativa, como 0 10px 30px -5px rgba(0,0,0,0.15). Apilar dos o tres sombras así queda aún más suave.
- ¿Cómo pongo una sombra solo en un lado?
- Desplaza la sombra hacia ese lado y usa una expansión negativa casi tan grande como el desenfoque para que no se vea en los otros lados, por ejemplo 0 8px 6px -6px rgba(0,0,0,0.3) para una sombra solo abajo.
- ¿Qué hace inset?
- inset dibuja la sombra dentro de la caja en lugar de detrás, haciendo que el elemento parezca hundido en la página. Es habitual en campos de entrada y botones pulsados.
- ¿Cuál es la diferencia entre box-shadow y drop-shadow?
- box-shadow sigue la caja y el radio del borde del elemento. La función filter: drop-shadow() sigue los píxeles realmente visibles, como el contorno de un PNG transparente o un icono SVG, pero no tiene expansión ni inset.
- ¿Cómo uso un box shadow personalizado en Tailwind?
- Copia la clase de Tailwind del generador, un valor arbitrario como shadow-[0_4px_12px_rgba(0,0,0,0.15)], y añádela al elemento. También puedes poner el valor CSS en la configuración boxShadow de tu tema para darle un nombre.
- ¿Puedo editar una sombra que ya tengo?
- Sí. Pega un valor de box-shadow, una declaración completa o una clase de Tailwind shadow-[…] en Importar. Las longitudes en rem y em se convierten a 16px.
- ¿Se envía mi CSS a algún sitio?
- No. El generador funciona completamente en tu navegador.