Generador de Box Shadow
Apila hasta 6 capas de sombra, afina cada una de forma independiente y copia código CSS o Tailwind limpio con un clic.
Cómo usar el generador de Box Shadow
- Haz clic en «Añadir capa» para apilar hasta 6 sombras; selecciona cualquier capa de la lista para editarla.
- Ajusta el desplazamiento X/Y para mover la sombra, luego afina el desenfoque para suavidad y la expansión para tamaño.
- Elige el color y la opacidad de la sombra; activa «Sombra interior» para efectos de profundidad interna.
- Estiliza la caja de demostración (color, fondo, radio de esquinas) para que coincida con tu componente real.
- Copia el resultado desde la pestaña CSS, o cambia a la pestaña Tailwind para una clase de utilidad.
Acerca de este generador de Box Shadow
La propiedad CSS box-shadow acepta una lista de sombras separadas por comas, cada una con desplazamientos horizontal y vertical, radio de desenfoque, radio de expansión, color y una palabra clave inset opcional. Escribir sombras multicapa a mano es tedioso: un pequeño cambio en un valor puede alterar drásticamente el resultado. Este generador da a cada capa sus propios controles y muestra el efecto combinado en tiempo real.
Usa los presets como punto de partida: desde elevaciones «Suaves» sutiles hasta profundidad por capas estilo Material, sombras retro duras de «Borde» y efectos brillantes de «Neón». Los valores negativos de expansión son ideales para sombras naturales y fotorrealistas. El CSS generado funciona en todos los navegadores modernos, y la salida Tailwind usa sintaxis de valor arbitrario compatible con Tailwind CSS v3+.
FAQ de Box Shadow
¿Cómo creo un box-shadow multicapa?
Haz clic en «Añadir capa» para apilar sombras. Cada capa tiene su propio desplazamiento, desenfoque, expansión, color, opacidad y ajuste inset. La salida CSS une todas las capas con comas automáticamente, y puedes reordenar las capas con los botones de flecha: la primera capa se renderiza encima.
¿Qué hace el valor de expansión (spread) en box-shadow?
La expansión agranda (positiva) o encoge (negativa) la sombra antes del desenfoque. Una expansión positiva hace la sombra más grande que el elemento, útil para bordes y brillos de neón. Una expansión negativa retrae la sombra hacia adentro, lo que combinado con un desenfoque grande crea una profundidad suave y natural.
¿Cómo hago una sombra interior (inset)?
Activa el interruptor «Sombra interior» en cualquier capa. Las sombras inset se renderizan dentro del elemento, creando efectos de presión o relieve. Incluso puedes mezclar capas inset y normales en una sola declaración box-shadow.
¿Es válida la clase Tailwind generada?
Sí. La salida Tailwind usa sintaxis de valor arbitrario como shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)], soportada por Tailwind CSS v3 y posteriores (incluido el motor v4) sin configuración.
¿Por qué mi sombra se ve diferente en mi propia página?
Las sombras se ven afectadas por el tamaño del elemento, el border-radius y el fondo detrás. Iguala el color de la caja de demostración, el radio de esquinas y el fondo a tu componente real para una vista previa precisa.