Ejemplos de box-shadow en CSS: 40 sombras que puedes copiar
Ejemplos de box-shadow en CSS
Ejemplos de box-shadow en CSS: 40 sombras para copiar en CSS o Tailwind
40 ejemplos originales de box-shadow que puedes previsualizar y copiar en CSS o como clase de Tailwind: suaves, en capas, solo abajo, inset, de color, para modo oscuro y una escala de elevación.
Una sombra de caja se escribe como box-shadow: x-offset y-offset blur spread color, con la palabra clave inset opcional. Las sombras suaves y realistas suelen apilar dos o tres capas con poca opacidad, y una sombra solo en la parte inferior usa un desplazamiento y positivo con un spread negativo. Elige cualquiera de los 40 ejemplos de abajo y cópialo en CSS o Tailwind.
Las cinco partes de un valor box-shadow
Parte
Ejemplo
Qué hace
desplazamiento x
Mueve la sombra a la derecha (positivo) o a la izquierda (negativo)
desplazamiento y
Mueve la sombra hacia abajo (positivo) o hacia arriba (negativo)
radio de desenfoque
Suaviza el borde; no puede ser negativo; 0 es un borde nítido
radio de expansión
-6px
Agranda (positivo) o encoge (negativo) la sombra antes de desenfocarla
rgb(0 0 0 / 0.15)
Si se omite, usa el color de texto del elemento
Dibuja la sombra dentro del borde en lugar de fuera
La mayoría de las listas de sombras te dan una imagen y una línea de CSS. Esta además explica por qué una sombra parece real o falsa, te da una escala de elevación coherente que puedes llevar a un sistema de diseño y muestra cómo mantener las sombras visibles sobre fondos oscuros. Todos los ejemplos son originales y funcionan en directo en tu navegador.
Filtra la galería por estilo, como en capas, solo abajo, inset o de color.
Cada tarjeta muestra la sombra sobre una superficie real. Cambia el fondo a oscuro para ver cómo se comporta.
Haz clic en una tarjeta para copiarla. Usa el selector para elegir CSS normal o una clase arbitraria de Tailwind.
Para un producto completo, copia los tokens de elevación que hay más abajo en lugar de sombras sueltas.
Usa un spread negativo con un desplazamiento y mayor para que la sombra quede debajo del elemento y no asome por los lados.
Tiñe las sombras con una versión oscura del tono del fondo en lugar de negro puro para un aspecto menos sucio.
Si la elevación al pasar el ratón va a tirones, anima la opacidad de un pseudoelemento que lleve la sombra grande en lugar de animar el propio box-shadow.
box-shadow sigue el border-radius, así que las tarjetas redondeadas tienen sombras redondeadas sin trabajo extra.
Preguntas frecuentes
¿Cómo pongo una sombra solo en la parte inferior?
Dale a la sombra un desplazamiento y positivo y un spread negativo de más o menos el mismo tamaño que el desenfoque, por ejemplo box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). El spread negativo recoge la sombra por la izquierda, la derecha y arriba, así que solo se ve la parte empujada por debajo del borde inferior.
¿Cómo uso más de una sombra?
Separa las sombras con comas. La primera sombra de la lista se pinta encima de las demás, así que pon primero la sombra de contacto, ajustada y más oscura, y al final la sombra ambiental, amplia y tenue.
¿Por qué mi sombra desaparece sobre un fondo oscuro?
Una sombra negra sobre una página casi negra apenas tiene contraste. En temas oscuros, usa un color de superficie más claro para los elementos elevados, añade un borde claro fino o un brillo inset de 1px y sube la opacidad de la sombra en lugar de depender solo de ella.
¿Qué diferencia hay entre box-shadow y drop-shadow()?
box-shadow sigue la caja y el border-radius del elemento. filter: drop-shadow() sigue los píxeles visibles, así que se ajusta a PNG transparentes y formas SVG, pero no tiene valor de spread ni opción inset.
¿Cómo escribo una sombra personalizada en Tailwind?
Usa un valor arbitrario con guiones bajos en lugar de espacios, como shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. La escala integrada va de shadow-2xs a shadow-2xl, e inset-shadow-sm y similares cubren las sombras interiores.
Por qué las sombras en capas parecen más reales
Los objetos reales proyectan dos tipos de sombra a la vez: una pequeña y oscura justo donde tocan la superficie y otra amplia y pálida por la luz que rebota en la habitación. Una sola sombra desenfocada intenta ser ambas y acaba pareciendo un halo gris.
Apilar de dos a cuatro capas, cada una con aproximadamente el doble de desplazamiento y desenfoque que la anterior y menos opacidad, imita esa mezcla. El coste es pequeño, pero valores de desenfoque muy grandes en muchos elementos pueden ralentizar el scroll en dispositivos modestos, así que reserva las sombras pesadas para unas pocas superficies elevadas.
Sombras como escala, no como algo puntual
Los productos se sienten coherentes cuando cada elemento elevado elige de una escalera corta: tarjetas en reposo, tarjetas con hover, desplegables, diálogos. Guarda cada paso como una custom property y reutilízala, así cambiar la dirección de la luz más adelante supone editar un solo sitio.
Haz que el desplazamiento y crezca más rápido que el x, que se queda en cero para una fuente de luz justo encima. Mezclar direcciones de luz entre componentes es una de las formas más rápidas de que una interfaz parezca montada con piezas sueltas.
Sombra solo en la parte inferior
Un spread negativo encoge la sombra por todos los lados, y luego el desplazamiento y la empuja hacia abajo. Mantén el spread cerca del desenfoque en negativo para que nada asome por los bordes izquierdo y derecho.
Tres sombras solo abajo
Desde la izquierda: un borde ajustado, una caída más suave y la línea fina que se usa bajo los encabezados fijos.
Una escala de elevación reutilizable
Cinco pasos cubren la mayoría de las interfaces. Cada uno duplica el desplazamiento y el desenfoque del anterior y mantiene debajo una capa de contacto ajustada.
Los componentes usan var(--shadow-2) y nunca escriben una sombra a mano. El bloque oscuro cambia a un borde tenue y un negro más profundo.
Sombra única frente a sombra en capas
Mismo tamaño, distinto realismo
La tarjeta de la izquierda usa un único desenfoque grande. La de la derecha reparte la misma oscuridad en tres capas, lo que se percibe como una elevación más suave y natural.