Generador de Box Shadow

Un box-shadow en CSS se construye con cinco partes, y cada control deslizante de esta herramienta corresponde a una de ellas. El desplazamiento X mueve la sombra a la izquierda o a la derecha, y el desplazamiento Y la mueve hacia arriba o hacia abajo, de modo que un Y positivo hace caer la sombra debajo del elemento, como una luz cenital. El radio de desenfoque controla qué tan suave es el borde: cero da una línea dura y nítida, mientras que un valor mayor la difumina en una neblina difusa. La expansión (spread) agranda o reduce la sombra antes de aplicar el desenfoque. El color, junto con su opacidad, se genera como un valor rgba() con la transparencia ya incorporada. Una sexta palabra clave, inset, invierte toda la sombra hacia adentro para un aspecto presionado. Ajusta cada control de arriba y la vista previa en vivo se actualiza al instante, para que veas exactamente cómo cambia el resultado antes de copiar el código.

En CSS colocas varias sombras en una sola regla box-shadow separándolas con comas, y se renderizan de atrás hacia adelante, así que la primera sombra queda encima. Esta herramienta se encarga de eso por ti: añades una nueva capa y ella gestiona automáticamente la sintaxis separada por comas. Apilar capas es cómo se logra una profundidad realista, porque una sola sombra se ve plana, mientras que dos o tres con distintos desplazamientos, desenfoques y opacidades imitan cómo cae la luz en realidad. Puedes reordenar las capas, duplicar una como punto de partida y activar o desactivar cualquier capa para comparar looks sin borrarla. Los preajustes de elevación Material usan exactamente este enfoque, apilando dos o tres capas por nivel tal como lo hace la especificación de Google. Arma tu conjunto de capas con los controles de arriba y luego copia la regla combinada con un clic.

La expansión (spread) agranda o contrae una sombra antes de aplicar el desenfoque. Una expansión positiva hace que la sombra sea más grande que el elemento, mientras que una expansión negativa la reduce hacia adentro para que la sombra quede más ajustada debajo. La expansión negativa es el truco detrás de las sombras de tarjeta modernas: al recoger la sombra hacia adentro y empujarla hacia abajo con un pequeño desplazamiento Y, obtienes un charco suave de sombra justo debajo de la tarjeta en lugar de un halo difuso que se escapa por todos lados. Eso se percibe como una elevación sutil y anclada, en vez de una sombra proyectada anticuada. Combinar un color de baja opacidad con expansión negativa y un desenfoque moderado es la receta que usan la mayoría de los sistemas de diseño para tarjetas limpias y elevadas. El control de expansión aquí va de -50px a 50px, así que fija un valor negativo, observa cómo se ajusta la vista previa y copia el resultado directamente en tu hoja de estilos.

El neumorfismo, o soft UI, es un estilo en el que los elementos parecen extruidos del fondo en lugar de flotar sobre él, como si estuvieran presionados desde el mismo material. El efecto necesita dos sombras sobre una única superficie de color: una sombra oscura en un lado y un resalte claro en el lado opuesto, de modo que el elemento parezca suavemente elevado. Conseguir ese par correctamente a mano es delicado, porque ambas sombras deben derivarse del mismo color base. El modo de Neumorfismo dedicado de esta herramienta hace los cálculos por ti: defines un color base, la intensidad, la distancia y el desenfoque, y calcula automáticamente el par de sombras clara y oscura correspondiente. Puedes previsualizarlo sobre una tarjeta, un botón o un avatar, y alternar entre fondos claros y oscuros para comprobar el contraste. Abre el modo soft-UI de arriba, ajusta el color base y copia el par de sombras generado.

Sí. El generador produce la misma sombra en cinco formatos listos para copiar, para que encaje directamente en tu stack. Obtienes CSS puro como una regla box-shadow lista para pegar, una clase Tailwind de valor arbitrario en la forma shadow-[...], una variable SCSS que puedes reutilizar en varios parciales, un literal de plantilla de styled-components para CSS-in-JS, y design tokens en JSON con la forma estándar de token para flujos de sistemas de diseño. Puedes copiar la regla completa, copiar solo el valor en bruto cuando solo necesitas la parte después de la propiedad, o descargar la salida como archivo. Un historial integrado guarda hasta 20 de tus estados recientes, para que puedas volver a una versión anterior sin rehacer tu trabajo. Construye arriba la sombra que quieres, elige el formato que coincida con tu proyecto y copia el código con un clic.