Generador de Box Shadow CSS
Sombras multicapa, presets neón, preview en vivo
Crea efectos box-shadow CSS con múltiples capas y previsualización en vivo. Genera sombras suaves, bordes duros, brillos neón o efectos neumórficos con sliders visuales y presets en un clic. Copia el CSS box-shadow completo al instante.
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);// guía rápida
La propiedad CSS box-shadow añade una o más sombras a un elemento. Crear sombras realistas y suaves a menudo requiere apilar múltiples capas de sombras con diferentes desplazamientos, desenfoques y opacidades para imitar la iluminación natural.
Cómo usar esta herramienta:
- Usa los controles deslizantes para ajustar los desplazamientos horizontal (X) y vertical (Y), el radio de desenfoque, el radio de propagación (spread) y el color de la sombra.
- Activa la casilla Inset para renderizar la sombra dentro del marco en lugar de fuera.
- Añade múltiples capas de sombra para construir sombras suaves neumórficas o ambientales.
- Copia la declaración CSS completa al instante.
// preguntas frecuentes
¿Por qué debería apilar múltiples capas de box-shadow?
Las sombras de una sola capa a menudo lucen artificiales y duras. Apilar de 2 a 5 capas de sombras con diferentes valores de desenfoque y opacidad crea un degradado mucho más suave y natural que imita cómo se difunde la luz en el mundo físico.
¿Cuál es la diferencia entre blur and spread en box-shadow?
El radio de desenfoque (blur) controla qué tan difuminados están los bordes de la sombra (valores más grandes significan sombras más suaves). El radio de propagación (spread) controla el tamaño de la fuente de la sombra; valores positivos expanden la sombra, mientras que valores negativos la contraen.
¿Se puede aplicar box-shadow dentro de un elemento?
Sí. Añadir la palabra clave <code>inset</code> a la propiedad CSS cambia la sombra de una sombra exterior (sombra paralela) a una sombra interior, haciendo que el elemento parezca presionado o hundido en el fondo.