Generador de Box Shadow

El Generador de Box Shadow permite diseñar sombras CSS visualmente con soporte multi-capa, 12 presets integrados (incluyendo Neumorfismo, Neon, Sharp, Layered), controles por capa para offset, blur, spread, color, opacidad e inset, vista previa en tiempo real con cambio claro/oscuro, y genera tanto CSS estándar como Tailwind CSS. Sin registro.

Presets

Capas (1)

0px 4px 12px 0px

Configuración de Capa #1

Inset

Offset X0px

Offset Y4px

Blur12px

Spread0px

Color

Opacidad25%

Color de Caja

Radiopx

CSS

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

Tailwind CSS

shadow-md

¿Tienes una sugerencia?

Solicita una nueva herramienta o sugiere mejoras — ¡únete a nuestra comunidad en Slack!

Dejar feedback en Slack

¿Qué es un Generador de Box Shadow?

Un Generador de Box Shadow es una herramienta visual que ayuda a crear efectos CSS box-shadow sin escribir código manualmente. La propiedad box-shadow añade efectos de sombra alrededor de un elemento, creando profundidad y dimensión en el diseño web. Esta herramienta ofrece edición multi-capa con 12 presets integrados incluyendo estilos populares como Neumorfismo, brillo Neon y bordes Sharp.

Cómo Usar el Generador de Box Shadow

Elige un preset para comenzar o inicia con la capa de sombra predeterminada
Ajusta las propiedades usando sliders: Offset X/Y, Blur, Spread y Opacidad
Elige un color de sombra usando el selector de colores y activa Inset si es necesario
Agrega múltiples capas para efectos complejos usando el botón Agregar Capa
Alterna entre fondos claro y oscuro para probar la apariencia de la sombra
Copia el código CSS o Tailwind CSS generado para usar en tu proyecto

Preguntas Frecuentes

¿Qué es CSS box-shadow?

CSS box-shadow añade efectos de sombra alrededor de un elemento. Acepta valores para offset horizontal, offset vertical, radio de blur, radio de spread, color y una palabra clave inset opcional.

¿Cómo crear un efecto Neumorfismo?

Neumorfismo usa dos sombras: una sombra oscura en una dirección y una sombra clara en la dirección opuesta, creando un efecto elevado. Usa el preset Neumorfismo como punto de partida.

¿Puedo usar múltiples capas de sombra?

Sí. Esta herramienta soporta capas ilimitadas que puedes agregar, eliminar y reordenar. Cada capa tiene controles independientes para offset, blur, spread, color, opacidad e inset.

¿Genera clases Tailwind CSS?

Sí. La herramienta genera tanto código CSS box-shadow estándar como clases Tailwind CSS. Para sombras simples, genera clases como shadow-md. Para sombras personalizadas, genera sintaxis de valor arbitrario.

¿Mis datos están seguros?

Sí. Toda generación de sombras ocurre 100% en tu navegador. Ningún dato se envía a ningún servidor.