Shadow Forge

Crea Sombras CSS Visualmente

Diseña sombras hermosas con un editor visual. Añade múltiples capas, personaliza offset, desenfoque, difusión y opacidad. Copia el código CSS al instante.

16px

Capas de Sombra

Opacidad30%
Offset X0px
Offset Y4px
Desenfoque15px
Difusión0px

Código CSS

box-shadow: 0px 4px 15px 0px rgba(99, 102, 241, 0.3);

Presets de Sombra

Cómo Crear Sombras CSS

1

1. Añade Capas de Sombra

Comienza con una sombra o añade múltiples capas. Cada capa puede tener su propio color, offset, desenfoque, difusión y opacidad.

2

2. Personaliza Cada Capa

Ajusta el offset, radio de desenfoque, difusión y opacidad. Activa el modo inset para sombras internas. Prueba un preset para inspiración rápida.

3

3. Copia el CSS

Copia el código CSS generado con un solo clic y pégalo directamente en tu hoja de estilos. Funciona en todos los navegadores modernos.

Preguntas Frecuentes

¿Este generador de sombras CSS es gratis?

Sí, 100% gratis sin límites. Crea todas las sombras que necesites sin registro.

¿Puedo añadir múltiples capas de sombra?

¡Sí! Puedes añadir múltiples capas y personalizar cada una de forma independiente. Esto permite crear efectos complejos como Material Design o estilos neumorfismo.

¿Qué es una sombra inset?

Una sombra inset aparece dentro del elemento en lugar de fuera. Crea un efecto de brillo interno o presionado. Activa el botón Inset en cualquier capa.

¿Mis datos están seguros?

Absolutamente. Todo se ejecuta en tu navegador. Ningún dato se transmite a ningún servidor.

Explorar Más Herramientas