¿Qué es el Generador de CSS Box Shadow?

El Generador de CSS Box Shadow es una herramienta visual que te ayuda a crear efectos CSS box-shadow sin necesidad de memorizar la sintaxis. En lugar de escribir valores de sombra manualmente, utilizas controles deslizantes e intuitivos para diseñar la sombra perfecta, y luego copias el código CSS generado directamente en tu proyecto.

Por qué importan las herramientas visuales: La propiedad CSS box-shadow acepta múltiples valores en un orden específico: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Obtener la combinación correcta puede ser complicado, especialmente al superponer múltiples sombras para efectos realistas. Esta herramienta te proporciona retroalimentación visual instantánea mientras ajustas cada parámetro.

Características Principales

Múltiples Capas de Sombra

Apila hasta 10 capas de sombra independientes para crear efectos complejos y realistas con profundidad y dimensión.

Presets Integrados

Comienza con sombras diseñadas profesionalmente como Elevated, Neumorphism o estilos de Material Design.

Control Total

Ajusta con precisión desplazamiento, desenfoque, expansión, color, opacidad y sombra interior para cada capa.

Vista Previa en Tiempo Real

Ve los cambios al instante mientras ajustas cualquier valor, con retroalimentación visual en tiempo real.

Cómo Usar

Sigue estos pasos simples para crear efectos de sombra profesionales en minutos:

Ajusta los Controles de Sombra

Usa los controles deslizantes o escribe valores directamente para configurar las propiedades de tu sombra:

Desplazamiento X — Mueve la sombra hacia la izquierda (-) o hacia la derecha (+)
Desplazamiento Y — Mueve la sombra hacia arriba (-) o hacia abajo (+)
Desenfoque — Controla la suavidad del borde de la sombra (0 = nítido)
Expansión — Expande (+) o reduce (-) el tamaño de la sombra
Color y Opacidad — Elige un color de sombra y ajusta su transparencia
Sombra interior — Activa para crear una sombra interior en lugar de una exterior

Agrega Más Capas (Opcional)

Haz clic en el botón + para agregar capas de sombra adicionales. Cada capa tiene controles independientes. Haz clic en una capa en la lista para seleccionarla y modificar sus valores. Usa el icono de ojo para mostrar/ocultar capas individuales.

Prueba los Presets (Opcional)

Explora la cuadrícula de presets en la parte inferior del panel de controles. Haz clic en cualquier preset para aplicarlo al instante. Luego puedes personalizar los valores para que coincidan con tu diseño.

Personaliza la Vista Previa

Prueba tu sombra en diferentes fondos cambiando los colores de Fondo y Elemento. Cambia entre formas Rounded, Square y Circle para ver cómo se ve la sombra en diferentes elementos.

Copia el CSS

Cuando estés satisfecho, haz clic en el botón Copiar encima de la salida de código. La propiedad CSS box-shadow completa se copia al portapapeles, lista para pegar en tu hoja de estilos.

Características

Controles Visuales de Sombra

Cada propiedad de sombra tiene un control deslizante dedicado con una entrada numérica sincronizada. Arrastra el control deslizante para ajustes rápidos o escribe valores exactos para precisión. Los cambios se reflejan en la vista previa al instante.

Consejo profesional: Usa los controles deslizantes para experimentación rápida e inputs numéricos cuando necesites precisión al píxel. El sistema de entrada dual te da lo mejor de ambos mundos.

Múltiples Capas de Sombra

Las sombras del mundo real rara vez son una sola capa. Esta herramienta te permite apilar hasta 10 capas de sombra, cada una con configuraciones independientes. Combina sombras sutiles y fuertes para lograr una profundidad que se vea natural y pulida.

Una Sola Capa

Sombra Plana

Apariencia unidimensional
Aspecto artificial
Percepción de profundidad limitada
Menos realista

Múltiples Capas

Sombra Realista

Profundidad y dimensión natural
Apariencia profesional
Gradientes suaves
Elevación realista

Presets de Sombra

Elige entre 9 presets cuidadosamente diseñados para comenzar rápidamente:

Subtle

Una sombra ligera, casi imperceptible para interfaces limpias

Elevated

Sombra de dos capas para un efecto de elevación suave

Strong

Sombra audaz y prominente que demanda atención

Soft

Sombra difusa de tres capas para un aspecto suave y realista

Neon

Efecto de brillo coloreado usando expansión y colores vibrantes

Inset

Sombra interior para elementos presionados o hundidos

Neumorphism

Estilo de interfaz suave con par de sombras claras y oscuras

Material

Sombra de elevación inspirada en Google Material Design

Float

Efecto flotante de elevación alta con sombra distante

Personalización de la Vista Previa

Cambia el color de fondo de la vista previa y el color del elemento para probar cómo se ve tu sombra en diferentes superficies. Cambia entre formas redondeadas, cuadradas y circulares para que coincidan con tus elementos de interfaz reales.

Colores de Fondo

Prueba sombras en fondos claros, oscuros o personalizados

Colores de Elemento

Ajusta el color del elemento para que coincida con tu sistema de diseño

Opciones de Forma

Vista previa en elementos redondeados, cuadrados o circulares

Salida CSS en Tiempo Real

El código CSS generado se actualiza en tiempo real mientras realizas cambios. Cópialo con un clic y pégalo directamente en tu proyecto.

Ejemplo de Salida CSS

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
            0 2px 4px rgba(0, 0, 0, 0.06);

Preguntas Frecuentes

¿Qué es la propiedad CSS box-shadow?

box-shadow es una propiedad CSS que añade efectos de sombra alrededor de un elemento. Acepta valores para desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Múltiples sombras pueden separarse por comas.

Ejemplo de Sintaxis

box-shadow: offset-x offset-y blur-radius spread-radius color;

¿Por qué mis sombras se ven planas e irreales?

Las sombras de una sola capa con alta opacidad tienden a verse artificiales. Para resultados más realistas, usa múltiples capas con baja opacidad (10-25%) y evita el negro puro. Los presets "Soft" y "Elevated" demuestran esta técnica.

Mejor práctica: Superpón 2-3 sombras con opacidad decreciente y desenfoque creciente para imitar la difusión natural de la luz.

¿Qué hace la opción Sombra interior?

El botón Sombra interior cambia la sombra de una sombra exterior (predeterminada) a una sombra interior. Las sombras interiores crean un efecto presionado o hundido, comúnmente usado en campos de entrada y estados interactivos.

Sombras exteriores: Crean elevación y profundidad
Sombras interiores: Crean efectos presionados o grabados

¿Cuántas capas de sombra puedo agregar?

Puedes agregar hasta 10 capas de sombra. Cada capa tiene controles independientes para desplazamiento, desenfoque, expansión, color, opacidad y sombra interior. También puedes alternar la visibilidad de capas individuales.

Nota de rendimiento: Aunque se soportan 10 capas, la mayoría de efectos realistas usan 2-4 capas. Más capas pueden afectar el rendimiento de renderizado en dispositivos antiguos.

¿Puedo usar sombras coloreadas en lugar de negras?

Sí. De hecho, las sombras coloreadas a menudo se ven mejor que las negras. Usa el selector de color para elegir un color de sombra que coincida o complemente tu paleta de diseño. El preset "Neon" es un gran ejemplo de sombras coloreadas.

Usa colores de marca para sombras sutiles con marca
Usa colores complementarios para efectos de brillo vibrante
Usa azul oscuro o púrpura en lugar de negro puro para sombras más suaves

¿Es el CSS generado compatible con todos los navegadores?

La propiedad box-shadow es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. No se necesitan prefijos de proveedor.

Compatibilidad de Navegadores 100%