Функción drop-shadow

La función drop-shadow permite agregar una sombra a la imagen de fondo.

Sintaxis

cssselector {
  filter: drop-shadow(desplazamiento x, desplazamiento y, radio de desenfoque, color);
}

Valores

Valor	Descripción
desplazamiento x	Desplazamiento horizontal de la sombra relativo al fondo. Un número positivo indica un desplazamiento de la sombra hacia la derecha, un número negativo - hacia la izquierda. Parámetro obligatorio.
desplazamiento y	Desplazamiento vertical de la sombra relativo al fondo. Un número positivo indica un desplazamiento de la sombra hacia abajo, un número negativo - hacia arriba. Parámetro obligatorio.
desenfoque	Establece el radio de desenfoque de la sombra. Cuanto mayor sea el valor, más se difumina la sombra. Parámetro opcional. Por defecto es `0`.
color	Color de la sombra. Parámetro opcional. Por defecto se establece el color negro para la sombra.

Ejemplo

Establezcamos para nuestra imagen una sombra azul claro sin desplazamiento en los ejes, con un desenfoque de 5px:

html<div id="elem"></div>

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Véase también

función blur,
que difumina el fondo
función brightness,
que establece el brillo del fondo
función contrast,
que establece el contraste del fondo
función hue-rotate,
que establece la tonalidad del fondo
función invert,
que invierte los colores del fondo
función opacity,
que establece la transparencia del fondo
función sepia,
que convierte el fondo a sepia
propiedad background,
que es una propiedad abreviada para el fondo
propiedad background-image,
mediante la cual se puede asignar una imagen de fondo a un bloque