Generador de Box Shadow CSS

Generador de Box Shadow CSS

El Generador de Box Shadow CSS te permite diseñar visualmente efectos de box-shadow y copiar instantáneamente el CSS listo para producción. Apila múltiples capas de sombras, elige entre ajustes curados inspirados en Material Design, Tailwind CSS y Neumorfismo, o arrastra directamente sobre la vista previa para posicionar tu sombra. Todo se ejecuta en tu navegador; tu código nunca sale de la página.

Cómo usar el Generador de Box Shadow CSS

1. Ajustar los controles de sombra — Usa los deslizadores para establecer el desplazamiento horizontal (X), vertical (Y), el radio de desenfoque y el radio de propagación. También puedes arrastrar directamente sobre el área de vista previa para reposicionar la sombra de forma intuitiva.
2. Elegir color y opacidad — Selecciona un color de sombra con el selector de color y ajusta la transparencia con el deslizador de opacidad. La vista previa se actualiza en tiempo real.
3. Añadir múltiples capas o ajustes — Haz clic en + Añadir Capa de Sombra para apilar sombras y lograr una profundidad realista. O selecciona un ajuste preestablecido curado (Material, Tailwind, Neumorfismo, etc.) para empezar con un diseño probado.
4. Copiar el CSS — Haz clic en Copiar para obtener el código box-shadow generado y pégalo directamente en tu hoja de estilos.

Comprendiendo la sintaxis de box-shadow

Consejos para sombras profesionales

• Capa de múltiples sombras — Los objetos del mundo real proyectan sombras complejas. Usar 2 o 3 capas (una capa de ambiente suave + una capa de luz clave más nítida) produce resultados mucho más realistas que una sola sombra.
• Usar opacidad baja — Las sombras con un 8-20% de opacidad se ven naturales. Evita sombras negras con alta opacidad, que pueden parecer toscas y anticuadas.
• Coincidir la dirección de la luz — Mantén los desplazamientos de sombra consistentes en toda tu interfaz para simular una única fuente de luz. Las sombras inconsistentes rompen la ilusión visual.
• Sombras de colores — En lugar de negro, intenta usar un tono más oscuro del color de fondo del elemento para un aspecto más cohesivo y moderno.
• Propagación negativa — Un valor de propagación negativo encoge la sombra más que el elemento, creando una sombra de contacto sutil que asienta los elementos sin bordes visibles.

Estilos de sombra populares explicados

• Elevación de Material Design — Utiliza dos capas de sombra: una sombra ambiental más suave y una sombra clave más nítida. Diferentes niveles de elevación (1-5) aumentan el desplazamiento y el desenfoque progresivamente.
• Utilidades de Tailwind CSS — Tailwind proporciona clases como shadow, shadow-md, shadow-lg, shadow-xl y shadow-2xl, cada una usando sombras de dos capas optimizadas para casos de uso comunes de tarjetas y modales.
• Neumorfismo — Crea un efecto de plástico extruido suave usando dos sombras opuestas (una clara y una oscura). Funciona mejor en fondos gris claro donde ambas sombras son visibles.
• Glassmorphism — Combina una sombra sutil con desenfoque de backdrop-filter y fondos semitransparentes. La sombra añade profundidad debajo del efecto de cristal esmerilado.

Preguntas frecuentes

¿Qué es la propiedad CSS box-shadow?

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Acepta valores para desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de propagación y color. Se pueden separar múltiples sombras por comas para crear efectos de profundidad por capas.

¿Cómo creo múltiples sombras de caja en CSS?

Las sombras de caja múltiples se crean separando cada definición de sombra con una coma. Por ejemplo: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Cada sombra se renderiza sobre la anterior, apareciendo la primera sombra en la parte superior.

¿Cuál es la diferencia entre box-shadow y drop-shadow?

box-shadow aplica la sombra a la caja rectangular de un elemento, mientras que filter: drop-shadow() sigue la forma real incluyendo áreas transparentes. box-shadow soporta el radio de propagación y el modo interior (inset), cosa que drop-shadow no hace. Para elementos rectangulares estándar, box-shadow es más común y tiene mejor rendimiento.

¿Qué es una sombra de caja interior (inset)?

Una sombra de caja interior aparece dentro del elemento en lugar de fuera. Se crea añadiendo la palabra clave inset antes de los valores de la sombra. Las sombras interiores se usan comúnmente para efectos de botones presionados, estilos de campos de entrada y para crear apariencias hundidas o grabadas.

¿Cuáles son buenos valores de box-shadow para un efecto de tarjeta sutil?

Una sombra de tarjeta sutil popular usa dos capas: 0 1px 3px rgba(0,0,0,0.12) para la sombra cercana y 0 1px 2px rgba(0,0,0,0.24) para la definición. Tailwind CSS utiliza 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) para su utilidad de sombra predeterminada.