ToolNestGenerador de Sombras CSS Gratis
Última actualización: 12 de octubre de 2026
Respuesta rápida: La propiedad box-shadow son seis valores y un dolor de cabeza: los desplazamientos, el desenfoque, la expansión, el color y el inset/outset interactúan de formas casi imposibles de imaginar solo con números. Este generador de box-shadow CSS gratuito te permite ver la sombra: arrastra los controles de desplazamiento horizontal y vertical, desenfoque y expansión, elige un color y una opacidad, activa el inset y mira la vista previa actualizarse en vivo. Cuando se vea bien, copia el fragmento CSS limpio directo a tu hoja de estilos — o empieza desde un preset (tarjeta suave, elevada, resplandor, sombra dura, interior) y ajústalo. Todo corre en tu navegador: sin librerías, sin registro, sin esperas.
box-shadow: 10px 10px 25px 0px rgba(15, 23, 42, 0.25);
✓ Gratis para siempre · ✓ Sin registro · ✓ Lo que escribes permanece en tu navegador — nunca se envía a nuestros servidores.
Cómo usar Generador de Sombras CSS
- Arrastra los controles — desplazamiento horizontal/vertical, desenfoque, expansión — y mira la vista previa actualizarse en vivo.
- Elige un color de sombra y ajusta su opacidad; las sombras oscuras sutiles al 15–30% de opacidad se ven más naturales.
- Activa el inset para empujar la sombra dentro de la caja (ideal para botones presionados y campos de entrada).
- Cambia el fondo de vista previa a oscuro para comprobar cómo se lee la sombra en modo oscuro.
- Empieza desde un preset si tienes prisa y ajústalo. Pulsa Copiar CSS y pega el fragmento en tu hoja de estilos.
Por qué usar Generador de Sombras CSS
- Vista previa real en vivo — cada movimiento del control redibuja la sombra al instante; sin adivinanzas ni recargas.
- Control total de box-shadow — desplazamientos, desenfoque, expansión, color, opacidad e inset: todos los valores que admite la propiedad.
- Comprobación en modo oscuro — cambia el fondo de vista previa a oscuro y comprueba si tu sombra sobrevive al cambio de tema.
- Presets en un clic — tarjeta suave, elevada, resplandor, sombra dura e interior: puntos de partida listos para producción.
- CSS limpio y copiable — una línea, sintaxis estándar, funciona en todos los navegadores modernos sin prefijos.
- Cero dependencias — JS y CSS puros, sin librerías; la página sigue siendo rápida en móvil.
Casos de uso comunes
- Diseño de tarjetas y modales: Ajusta la elevación exacta de tarjetas, diálogos y popovers — suave y cercana para UI en reposo, más grande y difusa para capas flotantes.
- Estados de botones: Diseña los estados normal, hover (sombra algo mayor) y activo (inset, presionado) de un set de botones con un lenguaje de sombras consistente.
- Auditorías de modo oscuro: Cambia la vista previa a oscuro y reajusta: las sombras que se ven sutiles sobre blanco suelen desaparecer o embarrarse sobre fondos oscuros.
- Tokens de un design system: Genera los 3–5 niveles de sombra (sm/md/lg/xl) que tu design system necesita y pégalos directo en tus variables CSS.
- Maquetas para clientes: Muestra a un cliente tres tratamientos de sombra en su tarjeta hero en segundos en lugar de editar CSS a mano y recargar.
Generador de Sombras CSS frente a las alternativas
- El editor de sombras de Chrome DevTools: Genuinamente bueno — el panel Styles tiene un editor visual de box-shadow. Pero está enterrado en devtools, los valores desaparecen al cerrar la pestaña y no hay biblioteca de presets. Esta página es la misma idea, marcable y compartible.
- Las utilidades de sombra de Tailwind: Perfectas si usas Tailwind a fondo (
shadow-lgy listo). Inútiles para valores personalizados, proyectos sin Tailwind o cuando necesitas el CSS crudo para una entrega de diseño. - Otros generadores de sombras online: La mayoría cubre lo básico, pero muchos están llenos de anuncios, no tienen control de opacidad o no pueden previsualizar sobre fondos oscuros. Opacidad + vista previa oscura + presets es la ventaja de esta página.
- Escribirlo a mano: Si ya puedes imaginar
0 24px 48px -12px rgba(0,0,0,.25)en tu cabeza, no necesitas esta herramienta. Para todos los demás — incluidos la mayoría de profesionales — verlo supera a imaginarlo.
Si vives en Chrome DevTools, su editor de sombras integrado ya está en tu flujo — consérvalo. Para todos los demás, o cuando quieras presets, vista previa en modo oscuro y un fragmento limpio para pegar en cualquier proyecto, esta página es la forma más rápida de pasar de la idea al CSS.
Preguntas frecuentes
¿Cuál es el orden de la sintaxis de box-shadow?
box-shadow: offset-x offset-y blur-radius spread-radius color; — más la palabra clave opcional inset al inicio para sombras interiores. Solo los dos desplazamientos son obligatorios; el desenfoque y la expansión valen 0 por defecto. Este generador escribe los valores exactamente en ese orden.¿Qué diferencia hay entre blur y spread?
El blur suaviza el borde de la sombra (más alto = más suave y difusa). El spread agranda o encoge el tamaño de la sombra antes del desenfoque (positivo = más grande, negativo = más pequeña). Una sombra de tarjeta suele ser desenfoque alto + expansión cero; un resplandor es desenfoque alto + color brillante.
¿Qué hace inset en box-shadow?
inset dibuja la sombra dentro del borde del elemento en lugar de fuera — el clásico aspecto de 'botón presionado' o campo hundido. Sin él, la sombra cae fuera de la caja (outset, el valor por defecto). Actívalo en esta página y mira cómo la vista previa se invierte.¿Puede box-shadow tener varias sombras?
Sí — sepáralas con comas:
box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.12);. Las sombras en capas (una cerrada + una suave) se ven mucho más realistas que una sola. Este generador construye una capa a la vez — genera dos y únelas con una coma.¿box-shadow afecta el rendimiento?
Las sombras grandes y difusas en muchos elementos animados pueden costar tiempo de GPU, sobre todo en móviles de gama baja. Para tarjetas y botones estáticos es insignificante. Si animas, prefiere
transform + opacity y mantén la sombra estática — o cambia a filter: drop-shadow() solo donde necesites que la sombra siga una forma no rectangular.box-shadow vs filter: drop-shadow — ¿cuál uso?
box-shadow sigue la caja del elemento (ideal para tarjetas, botones, modales). filter: drop-shadow() sigue la forma alfa renderizada — envuelve PNGs transparentes, iconos SVG y texto. Para paneles de UI, box-shadow (esta herramienta) es la opción correcta; para imágenes recortadas e iconos, gana drop-shadow.