Generador CSS Box Shadow
Crea sombras atractivas visualmente y copia el CSS.
Preajustes
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
Cómo usar
- Arrastra los deslizadores para ajustar desplazamiento horizontal y vertical, desenfoque, expansión y opacidad.
- Elige un color de sombra y activa «inset» si lo necesitas.
- Haz clic en «Añadir una capa de sombra» para apilar varias sombras.
- Usa un preajuste como punto de partida rápido.
- Haz clic en «Copiar el CSS» para pegar el resultado en tu hoja de estilo.
Preguntas frecuentes
¿Qué es box-shadow en CSS?
La propiedad CSS box-shadow añade efectos de sombra alrededor de un elemento. Admite valores para desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color.
¿Puedo añadir varias sombras?
Sí. Haz clic en «Añadir una capa de sombra» para añadir otra sombra. Las sombras múltiples se separan con comas en la salida CSS. Eso permite crear efectos superpuestos complejos.
¿Para qué sirve la palabra clave inset?
Añadir «inset» hace que la sombra aparezca dentro del elemento en lugar de fuera, creando una sombra interior o un efecto «hundido».
Los cinco parámetros de box-shadow
La propiedad CSS box-shadow añade uno o más efectos de sombra paralela a la caja de borde de un elemento. La gramática es box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, con varias sombras separadas por comas. Cada parámetro hace una cosa concreta:
- offset-x: distancia que la sombra se desplaza horizontalmente. Un valor positivo la mueve a la derecha; uno negativo, a la izquierda.
0la centra horizontalmente. - offset-y: desplazamiento vertical. Un valor positivo la mueve hacia abajo (imita la iluminación cenital, la convención de interfaz más común). Uno negativo la mueve hacia arriba.
- blur-radius: hasta dónde se desvanece el borde de la sombra hasta volverse transparente. Se implementa como una convolución gaussiana; los valores más grandes producen sombras más suaves, más grandes y más difusas. Los valores negativos no son válidos;
0produce un borde duro y nítido. - spread-radius: agranda (positivo) o encoge (negativo) la forma de la sombra antes de aplicar el desenfoque. Una expansión positiva agranda la sombra en todas las direcciones; una negativa la contrae, lo que te permite confinar una sombra a un lado de la caja.
- color: por defecto es
currentcolor(el propio valorcolordel elemento, lo que a veces sorprende). Las sombras de interfaz casi siempre usan un negro o un casi negro con alfa baja, dergba(0,0,0,0.05)argba(0,0,0,0.25), porque las sombras de negro sólido se ven pesadas y poco naturales. - La palabra clave inset pinta la sombra dentro de la caja en lugar de fuera. Se usa para los estados de botón pulsado, los «pozos» de entrada hundidos y los resplandores internos.
El navegador compone una lista de sombras de delante hacia atrás: la primera sombra de la lista es la más cercana al espectador y la última es la más lejana. Es el mismo orden que text-shadow y background, pero es lo contrario de cómo se aplica la cascada en la mayoría de las reglas CSS, una sorpresa común para los autores nuevos.
El sistema de elevación de dos sombras de Material Design
El Material Design de Google (presentado en mayo de 2014; Material Design 3 en 2021) define un sistema de elevación cuantizado en el que las superficies de la interfaz se sitúan en uno de varios niveles de píxeles independientes de la densidad. La receta de sombra de cada nivel usa dos sombras apiladas:
- Umbra (sombra principal): más pequeña y más oscura, que representa la luz bloqueada directamente debajo de la superficie. Desplazamiento y desenfoque cortos.
- Penumbra (sombra ambiental): más grande y más difusa, que representa la luz dispersa que rebota por la habitación. Mayor desplazamiento, mayor desenfoque, alfa más clara.
En Material Design 2, los valores de elevación van de 0dp (sin sombra) a 24dp; las tarjetas suelen usar 1-2dp en reposo y se animan hasta 8dp al pasar el cursor, mientras que los diálogos modales usan 24dp. Material Design 3 condensó la escala a cinco niveles con nombre (del 1 al 5) y añadió superposiciones tintadas además de las sombras paralelas en los temas oscuros. La estructura de umbra más penumbra sigue siendo el modelo visual, y es la razón por la que el shadow-md de Tailwind se distribuye como dos sombras apiladas: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).
Neumorfismo: la tendencia que necesitaba dos sombras opuestas
El neumorfismo (una palabra maleta de «new» y «skeuomorphism») alcanzó una popularidad viral a finales de 2019 / principios de 2020, después de que una publicación de diciembre de 2019 en Dribbble del diseñador ucraniano Alexander Plyuto titulada «Skeuomorph Mobile Banking» reuniera decenas de miles de likes en cuestión de semanas. La receta que lo define es dos box-shadows en un elemento con el mismo color de fondo que su elemento padre: una sombra más oscura en la parte inferior derecha y una sombra más clara en la parte superior izquierda. El lado oscuro simula que la superficie se aleja de una fuente de luz; el lado claro simula que se eleva en un brillo en el lado que da a la luz. Invertir los desplazamientos (o añadir inset a ambos) crea una apariencia hundida o pulsada.
Advertencia honesta sobre accesibilidad: el neumorfismo ha sido muy criticado porque el contraste visual entre un elemento y su fondo es necesariamente muy bajo, ya que comparten un color. Los botones y los campos de entrada pueden no cumplir el WCAG 1.4.11 (Contraste no textual, AA, relación de 3 : 1 de los componentes de la interfaz frente a los colores adyacentes). Los estados pulsado y sin pulsar a menudo solo se distinguen por la sutil dirección de la sombra, que los lectores de pantalla no pueden transmitir y que es invisible para cualquier persona con baja visión, daltonismo o reflejos en la pantalla. Usa este estilo con moderación en superficies decorativas, no en los controles principales.
box-shadow frente a filter: drop-shadow()
CSS Filter Effects define una alternativa, filter: drop-shadow(<x> <y> <blur> <color>), que se ve visualmente similar pero con una diferencia crítica. box-shadow proyecta una sombra del rectángulo de la caja de borde (redondeado por border-radius, si lo hay). drop-shadow proyecta una sombra del canal alfa del elemento renderizado, incluidos los hijos, los PNG transparentes, las formas SVG con recortes y el contenido enmascarado. La razón más común para elegir drop-shadow es que el elemento al que quieres dar sombra no es un rectángulo: un icono PNG transparente, un logotipo SVG, el triángulo de un bocadillo.
box-shadow | drop-shadow() | |
|---|---|---|
| Parámetro de expansión | Sí | No |
| Variante inset | Sí | No |
| Varias sombras | Sí (lista separada por comas) | Sí (encadenar filtros) |
| Afecta a los descendientes | No | Sí (todo el subárbol) |
| Recorte | Puede extenderse fuera de overflow:hidden | Limitado a los límites del filtro |
| Rendimiento | Compatible con el compositor | Provoca una pasada de filtro |
Notas sobre el rendimiento
Box-shadow es una de las propiedades CSS más costosas de renderizar en tiempo real. El coste tiene tres causas: el tamaño del núcleo de desenfoque (el desenfoque gaussiano es una convolución separable de dos pasadas; duplicar el desenfoque cuadruplica el trabajo por píxel, así que un desenfoque de 100 píxeles en una tarjeta grande puede reducir notablemente la tasa de fotogramas durante el desplazamiento), el área de la superficie de la sombra (el rectángulo expandido por la expansión y agrandado aún más por el desenfoque es lo que la GPU tiene que rasterizar; las grandes sombras de superposición modal son las más costosas) y los repintados (animar box-shadow provoca un repintado de la región de la sombra en cada fotograma).
Recomendaciones prácticas:
- Para las animaciones de elevación al pasar el cursor, es preferible animar
transform: translateY()yopacityen lugar debox-shadow. Estas están aceleradas por GPU y no provocan repintado. - Para el intercambio de sombra al pasar el cursor, declara ambas sombras en un pseudoelemento con la más grande a
opacity: 0y luego anima la opacidad del pseudoelemento. Esto intercambia las sombras sin animar el propio núcleo de desenfoque; el «Shadow Tricks» (2017) de Tobias Ahlin es el artículo de referencia. will-change: transformpuede sugerir al navegador que promueva un elemento a su propia capa de compositor. Úsalo con moderación: promover muchos elementos malgasta memoria de la GPU.- Evita box-shadow en los elementos que contienen grandes cantidades de contenido desplazable. Cada fotograma de desplazamiento tiene que repintar la sombra.
Accesibilidad
Las sombras son decorativas en lo que respecta al árbol de accesibilidad (los lectores de pantalla las ignoran), pero tienen implicaciones:
- WCAG 1.4.11 Contraste no textual (AA, 3 : 1). Si una tarjeta o un botón se distingue de su fondo solo por una sombra, esa sombra define en la práctica el borde visual, y una sombra tenue de
rgba(0,0,0,0.05)sobre un fondo casi blanco puede no alcanzar el umbral de 3 : 1. Muchos sistemas de diseño duplican la sombra más un borde sólido de 1 px para garantizar el contraste. - Indicadores de foco.
box-shadow: 0 0 0 3px <color>es la alternativa moderna aloutlinepor defecto del navegador porque sigue elborder-radius. El anillo debe cumplir el WCAG 2.4.7 Foco visible, con un grosor mínimo de 2 píxeles CSS y un contraste de 3 : 1 frente al estado sin foco y a los colores adyacentes. - Colores forzados / Alto contraste de Windows. En el modo
forced-colors: active, los navegadores ignoran la mayoría de los colores CSS y recolorean el contenido con la paleta del sistema del usuario. Las sombras de caja se eliminan o se reducen; los estados de la interfaz siempre deberían tener un indicador que no sea una sombra (cambio de borde, cambio de color, icono, etiqueta de texto) para estos usuarios. - Movimiento reducido. Los usuarios con
prefers-reduced-motion: reduceno deberían ver grandes animaciones de sombra al pasar el cursor o al desplazarse. Envuelve las transiciones animadas en una consulta de medios y mantén la sombra en reposo para estos usuarios.
Recetas rápidas
| Efecto | CSS |
|---|---|
| Elevación sutil de tarjeta | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| Tarjeta moderna suave | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| Elevación intensa de modal | 0 25px 50px -12px rgba(0,0,0,0.25) |
| Sello nítido de 1 px | 0 0 0 1px rgba(0,0,0,0.05) |
| Anillo de foco (3 px) | 0 0 0 3px rgba(59,130,246,0.5) |
| «Pozo» de entrada interior | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| Halo de resplandor | 0 0 20px 4px rgba(99,102,241,0.6) |
Más preguntas
¿Por qué se recorta mi sombra?
Casi siempre porque un elemento ancestro tiene overflow: hidden. La sombra se extiende más allá de la caja de borde, pero se recorta en el borde del ancestro. Dos soluciones: traslada la sombra al propio ancestro o usa un elemento envoltorio sin recorte por overflow. filter: drop-shadow() no tiene este problema, pero tiene sus propias contrapartidas.
¿Debería seguir usando prefijos de proveedor como -webkit-box-shadow?
No. box-shadow sin prefijo se admite universalmente desde alrededor de 2012. Los prefijos de proveedor son puro ruido en el código de 2026 y deberían eliminarse. Las bibliotecas de reinicio de CSS de principios de la década de 2010 a menudo los incluían de forma defensiva; el código moderno puede prescindir de ellos sin problemas.
¿Cómo aplico una sombra al texto, no a la caja?
Usa text-shadow, que tiene la misma sintaxis de desplazamiento / desenfoque / color, pero sin expansión ni inset. Para sombras con la forma de los glifos en texto estilizado (p. ej. texto con degradado mediante background-clip: text), filter: drop-shadow() sobre el elemento padre es la herramienta adecuada; box-shadow proyectaría una sombra rectangular detrás de los glifos.
¿Por qué mi sombra 0 0 0 2px no se ve suave?
Porque el tercer valor (el radio de desenfoque) es 0. Una sombra solo de expansión sin desenfoque produce un contorno sólido y nítido, que es exactamente lo que quieres para los anillos de foco y los trucos de «contorno falso», pero no para una elevación suave. Añade algo de desenfoque: 0 0 4px 0 rgba(0,0,0,0.2).
¿Se envía algo a un servidor?
No. La vista previa se vuelve a renderizar en tu navegador mientras arrastras los deslizadores; la cadena CSS se genera localmente; al copiar se escribe en tu portapapeles. La página funciona sin conexión una vez cargada.