Diseno · CSS

Generador de Box Shadow

Disena sombras CSS box-shadow multicapa de forma interactiva. Controla cada capa — desplazamiento, desenfoque, expansion, color e interior — luego copia en CSS o Tailwind.

In-browser only CSS · Tailwind Multi-layer shadows

Preajustes

Vista previa

Tamano del elemento

Radio del borde

Color del elemento

Capas de sombra

Resultado

0 4px 10px 0 rgba(0,0,0,0.25)

Como usar

Crea una sombra en cuatro pasos

1
Empieza con un preajuste o una capa en blanco
Haz clic en cualquier preajuste de la galeria o comienza desde la capa unica predeterminada.
2
Ajusta los parametros de la capa
Expande una tarjeta de capa para acceder a los controles de Desplazamiento X, Desplazamiento Y, Desenfoque, Expansion, Color e Interior.
3
Agrega mas capas para profundidad
Haz clic en "Agregar capa" (o Ctrl/Cmd+N). Reordenarlas con los botones arriba/abajo.
4
Copia y pega
Elige el formato CSS o Tailwind, luego haz clic en Copiar. El valor esta listo para pegarse en tu hoja de estilos.

Referencia de parametros

Guia de parametros box-shadow

Guia de parametros box-shadow
Parametro	Rango	Predeterminado	Notas
Desplaz. X	−100 a 100 px	0	Posicion horizontal; valores negativos mueven la sombra a la izquierda.
Desplaz. Y	−100 a 100 px	4 px	Posicion vertical; valores positivos mueven la sombra hacia abajo.
Desenfoque	0 a 200 px	10 px	Valores mas altos producen sombras mas suaves y difusas.
Expansion	−100 a 100 px	0	Valores positivos agrandan la sombra; negativos la reducen.
Color	Cualquier RGBA	rgba(0,0,0,0.25)	Usa negro semitransparente para sombras naturales.
Interior	Si / No	No	Coloca la sombra dentro del elemento.

Consejos

Consejos de diseno de sombras

Combina sombras claras y oscuras para realismo

Prueba una capa grande de desenfoque con baja opacidad combinada con una capa pequena mas opaca cerca del elemento.
Mantén la opacidad baja para elevacion sutil

Para tarjetas y botones, sombras en el rango rgba(0,0,0,0.04-0.12) se ven naturales.
Usa sombras interiores para estados hundidos

Una sombra interior con poco desenfoque crea un efecto convincente de elemento hundido.
Prueba en diferentes fondos

Usa el selector de fondo para verificar tu sombra en fondos claros, oscuros y personalizados.

Preguntas frecuentes

Como crear una sombra multicapa?

Haz clic en "Agregar capa" o presiona Ctrl/Cmd+N. Cada capa tiene sus propios parametros. El CSS final combina todas las capas activadas, separadas por comas.

Cual es la diferencia entre expansion y desenfoque?

El radio de desenfoque suaviza el borde de la sombra. El radio de expansion redimensiona la sombra antes de aplicar el desenfoque.

Como funcionan las sombras interiores?

Las sombras interiores aparecen dentro del elemento en lugar de afuera, utiles para estados hundidos y brillos interiores.

Como uso la salida Tailwind?

Selecciona el formato Tailwind y copia el valor. Pegalo como clase en tu HTML Tailwind.

Puedo compartir mi diseno de sombra?

Si. Haz clic en Compartir para codificar la configuracion en la URL. Copia y comparte la URL.

Como deshacer un cambio?

Presiona Ctrl/Cmd+Z para deshacer. Se almacenan hasta 30 pasos de historial por sesion.