Handytool
DesarrolladorGratisSe ejecuta localmente

Generador de box-shadow CSS

Diseña valores de box-shadow CSS con vista previa en vivo — desplazamientos, desenfoque, propagación, opacidad e interiores.

Vista previa
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Ajusta los controles deslizantes para diseñar la sombra — copia el CSS cuando se vea bien.

Acerca de Generador de box-shadow CSS

El generador box-shadow de Handytool te da controles deslizantes para desplazamiento, desenfoque, propagación, color y opacidad — y una tarjeta de vista previa en vivo que se actualiza mientras arrastras. Alterna sombras intrusiones, elige un color a través del selector, y copia la declaración CSS box-shadow resultante directamente en tu hoja de estilos. La herramienta completa se ejecuta en tu navegador; nada se carga.

Funciones de Generador de box-shadow CSS

  • 01

    Cada parámetro como un control deslizante

    Desplazamientos horizontales y verticales, radio de desenfoque, radio de propagación y opacidad cada uno tienen su propio control deslizante más una entrada numérica — ajusta fina por arrastre, luego toca por teclado para precisión de píxeles.

  • 02

    Sombras intrusiones soportadas

    Alterna el interruptor intrusión para cambiar de una sombra paralela a una sombra interior — útil para botones presionados, entradas hundidas y superficies neumórficas.

  • 03

    Color + opacidad, por separado

    Elige el color base en cualquier valor hex, luego ajusta opacidad independientemente. La salida usa rgba() para que el color y el alfa permanezcan legibles cuando copias el CSS.

Preguntas frecuentes sobre Generador de box-shadow CSS

¿Qué hace el valor de propagación?
La propagación positiva agranda la sombra en todas las direcciones antes de que se aplique el desenfoque; la propagación negativa la encoge. Es útil para brillos apretados y definidos cuando se empareja con un desenfoque pequeño.
¿Puedo agregar múltiples sombras?
Este generador emite una declaración de sombra única. Para superponer sombras, copia el valor, luego pégalo dos veces en tu CSS separado por una coma — box-shadow acepta una lista separada por comas.
¿Por qué mi sombra intrusión es invisible?
Las sombras intrusiones se dibujan dentro del elemento, por lo que necesitan un color de fondo o padding para ser visibles. Tampoco aparecerán en elementos transparentes o de tamaño cero.
¿Es la vista previa precisa en píxeles?
Sí — la vista previa usa la propiedad CSS box-shadow real en un elemento real, por lo que lo que ves es exactamente lo que tu hoja de estilos renderizará.

Herramientas relacionadas

Desarrollador →

Explora otras herramientas

Todas las herramientas →