¿Qué significan los valores de sombra?

El offset horizontal mueve la sombra izquierda/derecha, el vertical arriba/abajo, el desenfoque controla la suavidad, la expansión controla el tamaño y el color establece el color de la sombra.

¿Qué es una sombra interior (inset)?

Una sombra interior aparece dentro del elemento en lugar de fuera, creando un efecto presionado o empotrado.

¿Cuántas capas de sombra puedo usar?

CSS soporta capas de sombra ilimitadas. Esta herramienta te permite agregar múltiples. Los diseños comunes usan 1-3 capas para profundidad sutil y realista.

Herramienta de Diseño

Generador de Box Shadow CSS

Diseña sombras CSS visualmente con controles deslizantes para offset, desenfoque, expansión, color y opacidad.

100% gratis — no se necesita cuenta

Preajustes

Capas de Sombra

Desplaz. H: 0

-5050

Desplaz. V: 4

-5050

Desenfoque: 12

0100

Expansión: 0

050

Color

Opacidad: 15%

Interior

Vista Previa

CSS Generado

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Diseñador Visual de Sombras

Sombras pixel-perfect sin adivinar valores CSS

Controles Intuitivos

Deslizadores para offset horizontal/vertical, desenfoque, expansión, color y opacidad.

Múltiples Sombras

Apila múltiples capas de sombra para efectos complejos y realistas.

5 Preajustes

Puntos de partida sutil, medio, fuerte, flotante y resplandor interior.

Copiar CSS

Copia con un clic la propiedad CSS box-shadow generada.

Preguntas frecuentes

Herramientas de Diseño

Crea Contenido Visual Impresionante

Usa sombras hermosas en tus gráficos de redes sociales.