Saltar al contenido
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Generador de sombras CSS (box-shadow)

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.

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);

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.

Detalles técnicos

  • Desplazamiento, difuminado y extensión se expresan en píxeles; los desplazamientos negativos mueven la sombra hacia la izquierda o hacia arriba.
  • En el color vale cualquier color CSS. Las sombras suelen quedar más naturales con transparencia, por ejemplo rgba(0, 0, 0, 0.2), en lugar de un color sólido.
  • Genera una sola sombra. Para combinar varias (una suave y amplia más otra corta y marcada), sepáralas con comas en el CSS final.

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