Puntos clave
- 01Cada parámetro de box-shadow tiene su propio control deslizante más una entrada numérica para ajuste de precisión en píxeles.
- 02El botón inset cambia entre sombra proyectada y sombra interior para efectos presionados o neumórficos.
- 03El color y la opacidad se controlan por separado, generando rgba() para CSS legible.
- 04La vista previa utiliza la propiedad CSS real en un elemento real — lo que ves es exactamente lo que tu hoja de estilos renderiza.
Por qué usar un generador visual de box-shadow
CSS box-shadow acepta hasta seis valores — desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión, color y la palabra clave inset opcional. Escribirlos de memoria funciona para sombras simples, pero para cualquier cosa más matizada — un brillo ajustado, una sombra proyectada profunda, una capa de elevación suave — estás adivinando y recargando hasta que algo se vea bien.
Un generador visual colapsa ese ciclo de iteración. Mueve un control deslizante, ve el cambio al instante y copia solo cuando estés satisfecho. El generador de box-shadow de Handytool se ejecuta completamente en tu navegador, por lo que la vista previa es la propiedad CSS real aplicada a un elemento real — sin diferencias de renderizado entre la herramienta y tu página actual.
Cómo diseñar una sombra de caja
- 01
Ajusta los desplazamientos horizontal y vertical
Los valores positivos mueven la sombra hacia la derecha y hacia abajo. Los valores negativos la mueven hacia la izquierda y hacia arriba. Una sombra centrada (0, 0) crea un efecto de brillo.
- 02
Establece el radio de desenfoque
Los valores de desenfoque más altos crean sombras más suaves y difusas. Un desenfoque cero produce un contorno de sombra duro y sólido.
- 03
Ajusta el radio de expansión
La expansión positiva agranda la sombra antes del desenfoque. La expansión negativa la encoge, lo cual es útil para sombras ajustadas bajo elementos.
- 04
Elige un color y opacidad
Usa el selector de color para elegir el matiz de la sombra, luego reduce la opacidad para mayor sutileza. La salida utiliza rgba() para mantener los valores legibles.
- 05
Activa inset si es necesario
Inset cambia de una sombra proyectada a una sombra interior — útil para botones presionados, entradas hundidas y superficies neumórficas.
- 06
Copia la declaración CSS
Haz clic en Copiar para obtener el valor completo de box-shadow y pégalo en tu hoja de estilos.
Sin carga, sin cuenta
El generador es completamente del lado del cliente. Tus opciones de color, valores numéricos y estados de vista previa permanecen en tu navegador — nada se envía a un servidor. No hay cuenta que crear y sin límite de uso.
Como el elemento de vista previa utiliza la propiedad CSS box-shadow real, la salida es precisa por definición — no hay renderizado de canvas ni aproximación de captura de pantalla. Los valores de píxeles que copias son los valores de píxeles que el navegador aplica.
Preguntas frecuentes del generador de box-shadow
¿Qué hace el valor de expansión?
La expansión positiva agranda la sombra en todas las direcciones antes de aplicar el desenfoque; la expansión negativa la encoge. Útil para brillos ajustados y definidos cuando se combina con bajo desenfoque.
¿Puedo agregar múltiples box shadows?
Este generador genera una sombra a la vez. Para capas, copia el valor y separa múltiples sombras con comas en tu CSS — box-shadow acepta una lista separada por comas.
¿Por qué mi sombra inset es invisible?
Las sombras inset se dibujan dentro del elemento, por lo que necesitan un color de fondo o relleno visible para mostrarse. No aparecerán en elementos transparentes o de tamaño cero.
¿Es la vista previa precisa en píxeles?
Sí — la vista previa utiliza la propiedad CSS box-shadow real en un elemento DOM real, por lo que lo que ves es exactamente lo que tu hoja de estilos producirá.
¿Qué es una sombra neumórfica?
El neomorfismo utiliza dos sombras — una clara y una oscura — desplazadas en direcciones opuestas para hacer que un elemento parezca elevado o presionado desde una superficie plana. Ambas sombras son típicamente inset para la variante presionada.