Generador de Box Shadow con Vista Previa en Vivo
Este generador de box shadow te permite diseñar cualquier box-shadow de CSS de forma visual, sin memorizar la sintaxis. Mueve los controles de offset, desenfoque, expansión y opacidad, y observa cómo la vista previa se actualiza al instante mientras el código generado queda listo para copiar.
Está pensado para desarrolladores front-end y diseñadores que quieren una sombra pulida en segundos. Apila hasta 10 capas de sombra independientes para lograr una profundidad realista, parte de 9 ajustes integrados como Elevated, Neumorph o Material, y luego afina el color, la opacidad y el inset de cada capa hasta que se vea perfecta.
Cómo usar el generador de Box Shadow
Ajusta los controles de la sombra
Configura Offset X y Offset Y para mover la sombra en horizontal y en vertical, luego usa Desenfoque para suavizar el borde y Expansión para agrandarla o reducirla. Arrastra el control o escribe un valor exacto en el campo numérico que está a su lado.
Define color, opacidad e inset
Elige un Color de sombra y desliza su opacidad de 0 a 100%. Activa el interruptor Inset para convertir una sombra externa en una interna y crear efectos presionados o hundidos.
Apila capas o aplica un ajuste
Usa Agregar capa para apilar hasta 10 sombras, selecciona cualquier capa para editarla y toca el icono del ojo para ocultar una mientras comparas. O haz clic en un ajuste como Soft o Material para cargar una pila lista y ajustarla desde ahí.
Previsualiza y copia el CSS
Cambia los colores de Fondo y Elemento y alterna la forma entre Redondeado, Cuadrado y Círculo para probarla sobre una superficie real. Cuando se vea bien, haz clic en Copiar para llevar la regla box-shadow completa a tu portapapeles.
Funciones
Controles visuales
Offset X, Offset Y, Desenfoque y Expansión tienen cada uno un control deslizante con un campo numérico, para que arrastres por rapidez o escribas por precisión.
Color y opacidad
Elige cualquier color de sombra y ajusta su opacidad de 0 a 100% para lograr sombras sutiles y naturales en lugar de un negro duro.
Interruptor Inset
Cambia cualquier capa entre una sombra externa y una interna para crear efectos presionados, hundidos o de campo de formulario.
Hasta 10 capas
Apila varias sombras con ajustes independientes y luego agrega, elimina u oculta cada capa para construir una profundidad realista de varios pasos.
9 ajustes integrados
Parte de Subtle, Elevated, Strong, Soft, Neon, Inset, Neumorph, Material o Float, y luego personaliza según tu diseño.
Vista previa personalizable
Cambia los colores de fondo y del elemento para probar tu sombra sobre la superficie donde realmente aparecerá.
Formas de vista previa
Alterna el elemento de vista previa entre Redondeado, Cuadrado y Círculo para que coincida con el componente real de la interfaz que estás diseñando.
Vista previa en vivo en tiempo real
La vista previa y el CSS generado se actualizan en el instante en que cambias cualquier valor, así no hay que adivinar.
Copia con un clic
La regla box-shadow completa, incluyendo todas las capas, se copia a tu portapapeles con un solo clic.
Preguntas frecuentes
¿Qué es la propiedad box-shadow de CSS?
box-shadow agrega una sombra alrededor de un elemento. Sus valores, en orden, son el offset horizontal, el offset vertical, el radio de desenfoque, el radio de expansión y el color, con la palabra clave opcional inset. Este generador construye esa cadena exacta por ti a partir de los controles.
¿Qué significan los valores de offset, desenfoque y expansión?
Offset X mueve la sombra a izquierda o derecha, Offset Y la mueve arriba o abajo, Desenfoque controla qué tan suave es el borde (0 es un borde nítido) y Expansión agranda la sombra con valores positivos o la reduce con valores negativos.
¿Qué hace la opción inset de box-shadow?
El interruptor Inset cambia una sombra de externa a interna. Las sombras internas quedan dentro del elemento para crear un aspecto presionado o hundido, muy común en campos de formulario y botones activos.
¿Cómo agrego varias sombras (box shadow)?
Haz clic en Agregar capa para apilar una nueva sombra sobre la actual, hasta 10 capas en total. Cada capa conserva su propio offset, desenfoque, expansión, color, opacidad e inset, y el generador las une en una sola regla box-shadow separada por comas.
¿Cómo hago una sombra suave y sutil?
Usa poca opacidad (entre 10% y 25%), evita el negro puro y superpone dos o tres sombras suaves en lugar de una fuerte. Los ajustes Soft y Elevated están hechos exactamente así y son un buen punto de partida.
¿Puedo usar sombras de color en lugar de negro?
Sí. Abre el selector de color y elige cualquier tono que combine con tu paleta; las sombras de color suelen verse más ricas que el negro plano. El ajuste Neon muestra un resplandor de color creado con expansión y un tono vívido.
¿El CSS generado es compatible con todos los navegadores?
Sí. box-shadow es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge, y no necesita prefijos de proveedor, así que puedes pegar el resultado directamente en tu hoja de estilos.
Aún no hay comentarios. ¡Sé el primero en comentar!