Generador de Sombras CSS

Crea valores CSS box-shadow de múltiples capas con vista previa en vivo, opción inset y controles precisos.

Capas1
Crea valores CSS box-shadow de múltiples capas con vista previa en vivo, opción inset y controles precisos.
Ajustes de capa
Capa 1
px
px
px
px
Vista previa
Copia el valor de box-shadow en tu CSS.
box-shadow
Salida CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

¿Qué es box-shadow?

Crea valores CSS box-shadow de múltiples capas con vista previa en vivo, opción inset y controles precisos.

box-shadow es una propiedad CSS que dibuja una o más sombras detrás (o dentro) de un elemento.

Cada sombra usa desplazamientos horizontal y vertical, un radio de desenfoque, una expansión opcional y un color con alfa; añade inset para convertirla en una sombra interior.

Las capas múltiples se separan por comas, lo que permite apilar sombras sutiles para crear profundidad, brillo o bordes nítidos.

  • Usa desplazamientos pequeños con un desenfoque mayor para una elevación suave.
  • Usa mayor opacidad con poco desenfoque para bordes más definidos.
  • Combina una sombra exterior con una interior para dar profundidad.
  • Limita el número de capas para un mejor rendimiento.