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.

Otras herramientas relacionadas:

Herramientas para modificar texto:

• Generador de Arte ASCII
• Agregar saltos de línea
• Añadir números de línea al texto
• Añadir prefijo y sufijo al texto Destacado
• Verificador de Gramática AI
• Parafraseador de IA Nuevo
• Añadidor de Puntuación AI
• Expansor de Oraciones con IA Nuevo
• Salto de Línea por Cantidad de Caracteres
• Herramienta de Cifrado César
• Buscar y reemplazar texto
• Limpiador de Listas
• Letras Minúsculas o Mayúsculas
• Eliminar acentos del texto Destacado
• Calculadora de Eliminar Líneas Duplicadas
• Eliminar líneas vacías del texto
• Eliminar espacios iniciales y/o finales del texto
• Eliminar saltos de línea Destacado
• Eliminar números de línea del texto
• Mantener o borrar líneas que contienen una cadena
• Herramienta en línea para eliminar puntuación Destacado
• Eliminar espacios Destacado
• Invertir Línea
• Invertir Texto
• Generador de Texto Pequeño ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾ Destacado
• Repetición de cadena
• Formateador de Texto Destacado
• Repetición de Texto Destacado
• Convertidor de Mayúsculas de Título
• generador-de-texto-al-revés Destacado
• Convertidor de Lista de Texto a SQL
• Generador de Texto Elegante
• Eliminador de Caracteres Invisibles Destacado
• Generador de Texto Invisible Destacado
• Generador de Texto Zalgo
• Calculadora de Diferencia de Listas
• Formateador y Validador de JSON Nuevo
• Minificador/Embellecedor de JavaScript Nuevo
• Embellecedor CSS Nuevo
• Embellecedor de HTML Nuevo
• Formateador Validador YAML Nuevo
• Editor de Markdown Nuevo
• Convertidor de HTML a Markdown Nuevo
• Generador de Box Shadow CSS Nuevo
• Generador de Marcado Schema Nuevo
• Humanizador de texto con IA Nuevo
• Generador de Correos Electrónicos con IA Nuevo
• 🔍 Verificador de Plagio Nuevo
• Visualizador de Espacios en Blanco Nuevo
• Generador de Texto Tachado Nuevo
• Traductor de Pig Latin Nuevo