Resumen
Esta herramienta construye valores box-shadow que puedes pegar en CSS sin escribir cada parámetro a mano. Te da control sobre el desplazamiento horizontal y vertical, el radio de desenfoque, la expansión, el color de la sombra, la opacidad y el estilo inset, para que el resultado encaje con el elemento que estás diseñando. Funciona bien cuando la sombra debe tener intención y no parecer improvisada. Puedes aplicarla en tarjetas, menús, diálogos, barras fijas, campos de formulario y contenedores de imagen, y la vista previa te ayuda a comparar opciones suaves y más intensas antes de elegir una.
Casos de uso
- Profundidad en tarjetas de productoCrea una sombra suave para fichas de catálogo y separa cada tarjeta del fondo con claridad.
- Estado presionado en botonesGenera una sombra más cerrada, con menos desenfoque y expansión negativa, para un botón que parezca pulsable.
- Sombras internas en campos de textoConstruye efectos inset para inputs, barras de búsqueda y paneles con aspecto hundido.
- Panel flotante para desplegablesAjusta un desenfoque amplio y un desplazamiento moderado para tooltips, menús y popovers.
Como funciona
- 1
Define el desplazamiento horizontal y vertical para ubicar la sombra.
- 2
Ajusta desenfoque y expansión para controlar suavidad y tamaño.
- 3
Elige el color de la sombra y la opacidad según el fondo.
- 4
Activa inset si necesitas una sombra interior.
- 5
Copia el CSS generado y úsalo en el selector correspondiente.
Ejemplos
Sombra suave neutra
Entrada: x: 0, y: 10px, blur: 30px, spread: -8px, color: rgba(15, 23, 42, 0.14)
Salida: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.14);
Una sombra delicada para tarjetas claras sobre fondos suaves.
Inset para un campo hundido
Entrada: x: 0, y: 2px, blur: 6px, spread: 0, color: rgba(0, 0, 0, 0.18), inset: true
Salida: box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
Un efecto hundido para un campo de texto o un panel.
Hover compacto
Entrada: x: 0, y: 6px, blur: 16px, spread: -4px, color: rgba(37, 99, 235, 0.22)
Salida: box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
Una sombra con color para tarjetas de acción al pasar el cursor.
FAQ
¿Qué cambia el valor spread en la sombra?
Spread modifica el tamaño de la sombra antes del desenfoque. Los valores negativos la reducen y los positivos la amplían.
¿Por qué la sombra se ve demasiado dura en fondos oscuros?
Normalmente el color tiene demasiada opacidad o el desenfoque es demasiado bajo. Baja la opacidad y aumenta el blur para suavizar el borde.
¿Cuándo conviene usar inset en lugar de una sombra normal?
Usa inset cuando la superficie deba verse hundida, como en campos de formulario, paneles recesos o contenedores que parezcan presionados.
¿Puedo crear varias capas de sombra aquí?
La herramienta genera una sola regla por vez. Si necesitas varias capas, combina varios valores box-shadow manualmente en tu CSS.
¿Por qué una expansión negativa grande hace que la sombra desaparezca?
Una expansión negativa muy alta puede encoger demasiado la sombra, sobre todo si el blur es pequeño. Reduce la expansión negativa o aumenta el desenfoque.