Generador de sombras CSS

Un editor de box-shadow en el que arrastras la luz y apilas capas

El generador de sombras CSS sirve para ajustar los valores de box-shadow viendo el resultado al instante. Si arrastras la luz del escenario, las sombras de todas las capas giran juntas hacia el lado contrario; si arrastras el control de la sombra, solo se mueve la capa seleccionada. Puedes apilar hasta 12 capas, y la 1 de la lista es la que se dibuja encima. Las guías dibujan el borde de la sombra y la banda de difuminado de la capa seleccionada, y una línea amarilla discontinua muestra hasta dónde llegan todas las sombras fuera de la caja, con las cuatro distancias escritas.

La pantalla inicial muestra una sombra suave dividida en cuatro capas, con el desplazamiento y el difuminado duplicándose en cada paso. Elige un punto de partida entre los 24 ejemplos, cambia el fondo, la forma y el tamaño para que se parezcan a la pantalla donde la vas a usar y copia el resultado como CSS. Si necesitas una sombra que siga el contorno de un icono PNG o SVG transparente, cambia el método de dibujo a drop-shadow. Así obtienes código filter con el valor de difuminado reescrito para que el aspecto sea el mismo.

Cuándo usarlo

Una sombra indica qué elemento flota sobre la página y cuál está hundido en ella. Los mismos valores se ven muy distintos según el fondo y la forma, por eso es más rápido probarlos en algo parecido al uso real antes de escribir el código.

• Hacer que una tarjeta, un modal o un menú desplegable floten: varias capas tenues se ven menos sucias que una sola sombra oscura. Empieza con los ejemplos Suave 4 o Amplia 6 y ajusta la altura con Reducir / Ampliar para todas las capas.
• Hacer que un campo o un botón pulsado parezcan hundidos: usa una sombra interior (inset). El ejemplo Campo combina una sombra interior en la parte superior con una línea interna de 1px.
• Crear un anillo de foco o un estado seleccionado: una sombra con extensión y sin difuminado parece un borde que no desplaza el diseño. Pero en los modos de colores forzados, como el alto contraste de Windows, box-shadow se desactiva, así que acompaña el indicador de foco con outline.
• Poner sombra a un icono o logotipo transparente: box-shadow dibuja una sombra con la forma de la caja. Si la sombra debe seguir el dibujo, elige drop-shadow.
• Comprobar sobre un fondo oscuro o de color: una sombra negra ajustada en una pantalla clara casi desaparece en una oscura. Cambia el fondo y comprueba que la sombra se ve de verdad.

Cómo se usa

1. Elige un punto de partida. Pulsa uno de los 24 ejemplos de abajo y cambian a la vez las capas, el fondo y la forma. Puedes acotar la lista con los grupos (Básicas, En capas, Interiores, Color y luz, Estilos).
2. Arrastra la luz. Arrastra el control con forma de sol por el círculo del escenario y el desplazamiento de todas las capas gira el mismo ángulo. Con el teclado, las flechas giran 1° y con Shift de 15° en 15°.
3. Afina las capas. Selecciona una capa de la lista y cambia el desplazamiento X e Y, el difuminado, la extensión, el color y la opacidad con las barras o con los campos. Si arrastras el control en cruz del escenario, cambian a la vez los desplazamientos X e Y de la capa seleccionada. Una sombra de una sola capa puede convertirse en capas suaves con «Dividir en 4».
4. Adáptalo a la pantalla real. Ajusta la forma (tarjeta, botón, círculo, campo, cuadrado, icono transparente), el tamaño, el fondo y el color del elemento para que se parezcan a tu página. Los números de la línea amarilla discontinua indican cuánto se extiende la sombra fuera de la caja.
5. Copia. «Copiar CSS» se lleva el código y «Copiar enlace» guarda el estado actual como una dirección. La dirección guarda las capas, el fondo, el color del elemento, la forma, el tamaño y el método de dibujo, y no se modifica cuando se abre la página por primera vez.

Qué hace cada uno de los cinco valores

Una capa de sombra se escribe como [inset] X Y difuminado extensión color. Se pueden dar de dos a cuatro longitudes, y la que falta se lee como 0. Por eso esta herramienta omite el difuminado y la extensión cuando valen 0 y escribe algo como 6px 6px #0F172A.

• Desplazamientos X e Y: los valores positivos mueven la sombra a la derecha y hacia abajo, y los negativos a la izquierda y hacia arriba. Si la luz viene de arriba a la izquierda, la sombra va abajo a la derecha.
• Difuminado: con 0 el borde es nítido como una cuchilla, y cuanto mayor es el valor, más se extiende el borde. No se admiten valores negativos.
• Extensión: los valores positivos agrandan la sombra en todas las direcciones y los negativos la reducen. En una sombra interior la sombra crece hacia el interior del borde, así que cuanto mayor es el valor positivo, más área cubre.
• Color: con una opacidad del 100 % la herramienta escribe HEX, y con menos escribe rgba(). Si omites el color se usa el color del texto (currentColor), por eso esta herramienta siempre escribe un color.
• inset: en lugar de la sombra que proyecta una caja levantada sobre el fondo, la sombra se dibuja como si el fondo la proyectara hacia dentro de la caja.

El difuminado es el doble de la desviación estándar

La especificación de CSS indica aproximar el difuminado con un desenfoque gaussiano cuya desviación estándar es la mitad del valor de difuminado, y cada píxel debe coincidir con ese resultado con un margen del 5 %. Por eso, en un borde recto, la intensidad cambia desde el borde de la sombra, el valor de difuminado hacia dentro y el valor de difuminado hacia fuera, en un ancho total del doble del difuminado. Justo en el borde de la sombra la intensidad es el 50 % de la original, y a un valor de difuminado hacia fuera baja al 2,3 %. Por eso la herramienta calcula el «margen exterior» como extensión + difuminado ± desplazamiento.

Al medir en Chromium 151 el corte transversal de una sombra con difuminado de 16px, coincide con las proporciones de la tabla con un margen de 2,2 puntos porcentuales. Al aumentar el difuminado, la parte más oscura de la sombra empieza un valor de difuminado por dentro del borde, así que un difuminado grande en un elemento pequeño casi no deja zona oscura.

Extensión y esquinas redondeadas

La extensión empuja hacia fuera los lados rectos del borde de la sombra esa cantidad. El ancho y el alto nunca bajan de 0. La extensión también se suma al radio de las esquinas, pero cuando el radio es menor que la extensión, la cantidad que se suma se reduce para que las esquinas redondeadas y las rectas no se encuentren de forma brusca. Con radio r y crecimiento e, la cantidad que se suma es e × (1 + (r ÷ e − 1)³). En una sombra interior, el crecimiento es el tamaño de la extensión negativa.

El contorno discontinuo de las guías del escenario sigue esta regla. El ejemplo «Solo abajo», cuya extensión es negativa (0 10px 8px -8px), reduce la sombra por debajo del tamaño de la caja y luego la baja, de modo que arriba y a los lados casi no se ve sombra.

Varias capas: orden y sombras suaves

Puedes escribir varias sombras separadas por comas. La primera de la lista se dibuja encima y las demás se pintan detrás en orden. Con capas del mismo color el orden apenas se nota, pero cuando superpones anillos de extensión de colores distintos, como en el arcoíris, el anillo más pequeño debe ir primero para que se vean todos los colores.

Ahlin (2019) mostró que apilar sombras tenues cuyo desplazamiento y difuminado se duplican, como 1, 2, 4 y 8px, trata los bordes de forma más natural que una sola sombra. En la tabla de abajo, la «Intensidad superpuesta» es la intensidad de la zona central donde se solapan todas las capas, calculada como 1 − (1 − a₁)(1 − a₂)….

«Dividir en 4» crea cuatro capas a partir del desplazamiento, el difuminado y la extensión de la capa seleccionada, divididos entre 1/8, 1/4, 1/2 y 1. La opacidad de cada capa se fija en 1 − (1 − a)^(1/4) para que la intensidad superpuesta siga siendo la original. Por ejemplo, al dividir 0 8px 8px con una opacidad del 48 %, 0 1px 1px, 0 2px 2px, 0 4px 4px y 0 8px 8px pasan a ser capas del 15 % cada una, lo que equivale al ejemplo Suave 4. Cuando ya tienes más capas, ajústalas todas a la vez con Reducir / Ampliar (×0,8 y ×1,25) y Aclarar / Oscurecer para todas las capas.

Sombras interiores (inset)

Una sombra interior trata todo lo que queda fuera de la caja de relleno como opaco y dibuja esa sombra dentro de la caja. No sale nunca de la caja de relleno y se pinta justo encima del fondo del elemento y debajo de su borde. Por eso, en un elemento con borde, la sombra empieza desde el interior del borde.

• Campos y botones pulsados: una sombra interior tenue en la parte superior (inset 0 2px 4px) hace que el campo parezca más bajo que lo que lo rodea.
• Línea interna: inset 0 0 0 2px funciona como un borde que no cambia el tamaño, así que marcar una tarjeta seleccionada no mueve el diseño.
• Superficie cóncava: en un elemento del mismo color que el fondo, una sombra interior oscura y otra clara en direcciones opuestas hacen que la superficie parezca hundida.

Por ejemplo, activa inset e introduce X 12px, Y 8px, difuminado 18px, extensión −2px, color #336699 y opacidad 35 %, y obtienes inset 12px 8px 18px -2px rgba(51, 102, 153, 0.35). Una sombra interior nunca se extiende fuera de la caja, así que no forma parte del margen exterior.

box-shadow frente a filter: drop-shadow()

box-shadow crea una sombra con la forma de la caja de borde del elemento, mientras que drop-shadow() sigue la transparencia de lo que se ha dibujado. Cambia a la forma de icono transparente y alterna entre los dos métodos, y la diferencia se ve enseguida.

La especificación Filter Effects define el tercer valor de drop-shadow() como una desviación estándar, no como un radio de difuminado. En Chromium 151 comprobamos que los cortes de drop-shadow(… 10px) y de box-shadow … 20px se dibujan igual, y esta herramienta también escribe la mitad del difuminado al convertir a drop-shadow. Las capas con extensión se escriben sin ella, las sombras interiores se omiten, y un aviso debajo del código lo indica. Cuando se encadenan varios drop-shadow, cada sombra posterior proyecta también una sombra de las anteriores, así que el resultado es más oscuro y más ancho que los mismos valores en varias capas de box-shadow.

Las sombras no ocupan espacio

Las sombras no afectan al diseño y pueden superponerse a otras cajas o al texto. Tampoco crean desplazamiento, así que una sombra nunca ensancha la página. En cambio, una sombra se recorta cuando el padre tiene overflow: hidden o cuando la tarjeta está pegada al borde de una caja con desplazamiento.

Para que no se recorte, deja para cada sombra exterior un margen igual a extensión + difuminado, menos o más el desplazamiento en esa dirección. El ejemplo Suave (0 4px 12px) necesita 8px arriba, 12px a la derecha, 16px abajo y 12px a la izquierda. La línea amarilla discontinua del escenario y la frase situada debajo del CSS muestran estos valores para la sombra actual.

Fondos oscuros y de color

Una sombra funciona oscureciendo el fondo, así que cuando el fondo ya es oscuro apenas se ve. La tabla de abajo da el color bajo una sombra negra al 20 % y el contraste de luminancia entre ese color y el fondo.

La misma sombra se lee a 1,61:1 sobre blanco, pero casi desaparece a 1,05:1 sobre #0F172A. En una pantalla oscura, en lugar de oscurecer más la sombra, funciona mejor aclarar la cara del elemento respecto al fondo, o añadir una línea interior clara en la parte superior para sugerir altura. Sobre un fondo de color, una sombra gris puede verse apagada, así que conviene pensar en una sombra de la misma familia de color, como en el ejemplo De color.

Cuando animas una sombra

Las sombras se animan mezclando sus valores calculados. Cuando las dos listas tienen distinta longitud, la más corta se completa al final con sombras transparentes 0 0 0 0, pero si las sombras que ocupan la misma posición difieren en ser inset o no, no se pueden mezclar y el valor cambia de golpe. Para que una tarjeta se eleve al pasar el ratón, lo más seguro es dar a las sombras de antes y de después el mismo número de capas y el mismo orden de inset. El escenario de esta herramienta sigue la misma regla al cambiar de ejemplo: se mezcla con suavidad aunque cambie el número de capas, pero salta de golpe si una sombra en la misma posición pasa de exterior a inset o al revés. Si en el dispositivo está activada la reducción de movimiento, se desactiva la transición del escenario.

Compatibilidad de navegadores

Los números son la primera versión que incluye la función, según los datos de compatibilidad de navegadores de MDN. Los valores de drop-shadow() en Chrome 18 y Safari 6 corresponden a la época en que se usaba como -webkit-filter; los navegadores actuales no necesitan prefijo.

Errores frecuentes

• Usar box-shadow en un PNG transparente: se obtiene una sombra rectangular, no la forma del icono. Usa drop-shadow.
• Copiar tal cual el difuminado de box-shadow en drop-shadow: el tercer valor significa otra cosa, así que la sombra sale el doble de difusa. Escribe la mitad.
• Olvidar el overflow: hidden del padre: la sombra de la tarjeta se recorta. Deja un relleno interior igual al margen exterior.
• Una sombra cercana al negro al 100 %: la pantalla se ve pesada y sucia. Aumenta el difuminado y baja la opacidad, o divídela en capas.
• Una extensión positiva grande: cuando la extensión es mayor que el difuminado, la sombra parece un borde. Ajusta la extensión con pasos pequeños.
• Reutilizar en una pantalla oscura la sombra de una clara: el contraste cae a 1,05:1 y la altura desaparece.
• Creer que la primera sombra queda abajo: la primera sombra de la lista queda encima.

Límites y precauciones

• La especificación no fija el método exacto del difuminado; basta con coincidir con un desenfoque gaussiano con un margen del 5 %. La intensidad de los bordes puede variar un poco entre navegadores.
• La vista previa la dibuja con CSS real el navegador que estás usando. Comprueba el aspecto en otros navegadores en esos mismos navegadores.
• Solo se aceptan longitudes en px, con un decimal como máximo. X e Y llegan a ±300px, el difuminado de 0 a 300px y la extensión hasta ±150px. Las barras se mueven en un rango más estrecho, mientras que los campos admiten el rango completo.
• Cuando giras la luz o pulsas Reducir / Ampliar, los valores se redondean a 0,1px. Tras muchas repeticiones pueden alejarse un poco de los valores iniciales.
• Las opacidades de la «Intensidad superpuesta» y de «Dividir en 4» se calculan suponiendo que las capas son del mismo color. No valen para capas de colores distintos.
• El margen exterior considera que la sombra llega hasta el radio de difuminado. Más allá queda aún una sombra muy tenue, con una intensidad del 2,3 % o menos. drop-shadow se calcula a partir de la caja, así que en una forma más pequeña que la caja, como un icono, sale más ancha que la real.
• Los datos de compatibilidad de MDN conservan una nota según la cual las sombras exteriores crean barras de desplazamiento en Chrome, Firefox y Safari. En Chromium 151 no aparecieron, pero no probamos Firefox ni Safari.
• En el modo de colores forzados, box-shadow pasa a none. La información que transmitas solo con una sombra (foco, selección, separadores) debe mostrarse también con un borde o con outline.

Fecha de referencia Las especificaciones de CSS, los datos de compatibilidad de MDN, Ahlin (2019) y los valores de Material Components se comprobaron con los originales el 2026-10-21. Las intensidades, los radios de esquina y los contrastes de las tablas se calcularon directamente con el núcleo de cálculo de esta herramienta, y el difuminado de drop-shadow y el comportamiento del desplazamiento son resultados medidos en Chromium 151.

Fuentes

• 01W3C: CSS Backgrounds and Borders Module Level 3 — box-shadowCandidate Recommendation Draft 2024-03-11. §6.1 significado de los valores, longitudes omitidas leídas como 0, color por defecto currentColor; §6.1.1 forma de la sombra y fórmula de la esquina con extensión; §6.1.2 desviación estándar = difuminado ÷ 2 y tolerancia del 5 %; §6.1.3 la primera sombra queda encima, sin efecto en el diseño ni en el desplazamiento, animación mezclando los valores calculados
• 02W3C: Filter Effects Module Level 1 — drop-shadow()Working Draft 2018-12-18. La tercera longitud es una desviación estándar, no un radio de difuminado; no admite extensión ni varias sombras
• 03W3C: CSS Color Adjustment Module Level 1Candidate Recommendation Snapshot 2025-12-16. §3.1 en el modo de colores forzados, box-shadow y text-shadow se calculan como none
• 04MDN: box-shadowTabla de compatibilidad de navegadores: sin prefijo en Chrome 10, Edge 12, Firefox 4 y Safari 5.1; nota sobre las barras de desplazamiento por sombras exteriores
• 05MDN: drop-shadow()Tabla de compatibilidad de navegadores: Chrome 18, Edge 12, Firefox 35, Safari 6
• 06MDN: filterTabla de compatibilidad de navegadores: sin prefijo en Chrome 53, Edge 12, Firefox 35 y Safari 9.1; antes, -webkit-filter
• 07Tobias Ahlin: Smoother & sharper shadows with layered box-shadows2019-09-19. Ejemplos de 4, 5 y 6 capas con desplazamiento y difuminado que se duplican, y las opacidades (los valores de los ejemplos Suave 4, Nítida 5, Amplia 6 y Onírica 6)
• 08Material Components for the web: _elevation-theme.scssLos valores umbra, penumbra y ambient de la elevation 2 con opacidades 0,2, 0,14 y 0,12 (el ejemplo Material 2)

Preguntas frecuentes

Herramientas relacionadas