Saltar al contenido
QuickToolio
es - Espanolen - English

Generador de sombras CSS (box-shadow)

Ajusta desplazamiento, difuminado, extensión y color de una sombra CSS con vista previa en directo.

Se procesa en tu dispositivo. Nada se envía a ningún servidor.
box-shadow: 0px 8px 24px -4px rgba(16, 32, 29, 0.25);

Diseña una sombra CSS ajustando desplazamiento, difuminado, extensión y color, con vista previa en directo y el código box-shadow listo para copiar.

Compone la sintaxis box-shadow de CSS con los cinco parámetros que acepta: desplazamiento horizontal, vertical, difuminado, extensión y color, con la opción inset.

Casos de uso

  • Añadir profundidad a una tarjeta o botón.
  • Crear un efecto de elevación en un modal.
  • Diseñar una sombra interior sutil.

Cómo funciona

  1. 1

    Ajusta los valores

    Modifica desplazamiento X/Y, difuminado, extensión y color.

  2. 2

    Activa inset si hace falta

    Marca la casilla para una sombra interior.

  3. 3

    Copia el CSS

    Copia la propiedad box-shadow lista para pegar.

Preguntas frecuentes

¿Qué es el valor 'extensión'?
Controla cuánto crece o se encoge la sombra respecto al tamaño del elemento; valores negativos la hacen más pequeña que el elemento.

Herramientas relacionadas

← Colores y diseño