Sobre esta herramienta
La propiedad box-shadow es engañosamente profunda: desplazamiento, desenfoque, expansión, color y la palabra clave inset interactúan, y la profundidad real suele venir de apilar varias sombras. Este generador te da un deslizador para cada valor y te permite añadir varias capas, para que crees desde un sutil realce de tarjeta hasta un audaz efecto neumórfico.
Todo se actualiza en una vista previa en vivo, y el CSS de box-shadow terminado está a un clic de copiar. Funciona por completo en tu navegador.
Preguntas frecuentes
¿Admite varias sombras apiladas?
Sí. Haz clic en 'Add Layer' para apilar sombras adicionales — se combinan en un único valor box-shadow separado por comas, con la primera capa renderizada encima.
¿Qué hace la casilla 'inset'?
Cambia esa capa de una sombra proyectada hacia afuera a una sombra interna que aparece dentro del borde del elemento, útil para efectos de presionado o hundido.
¿Cómo se gestiona la transparencia de la sombra?
El control deslizante de opacidad se combina con el selector de color en un color hexadecimal de 8 dígitos (#rrggbbaa) para lograr transparencia alfa real, ya que el selector de color por sí solo no puede almacenar el canal alfa.
¿Se sube a algún sitio mi diseño?
No, la vista previa de la sombra y el CSS resultante se generan enteramente en tu navegador — nada se sube ni se guarda en un servidor.
¿Qué hace un valor de propagación (spread) negativo?
Un spread negativo encoge la forma de la sombra antes de difuminarla, y suele usarse para que la sombra parezca más fina o más ajustada que el propio elemento.