Función drop-shadow() de CSS

Definición y uso

CSS drop-shadow() La función de filtro aplica efectos de proyección a las imágenes.

Ejemplo

Ejemplo 1

Añadir diferentes efectos de proyección a las imágenes:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Prueba personal

Ejemplo 2

Añadir diferentes efectos de proyección a las imágenes (usar sombras horizontales y verticales negativas):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

Prueba personal

Sintaxis de CSS

drop-shadow(h-shadow v-shadow blur spread color)
Valor Descripción
h-shadow

Obligatorio. Especificar el valor en píxeles de la sombra horizontal.

Un valor negativo colocará la sombra en el lado izquierdo de la imagen.

v-shadow

Obligatorio. Especificar el valor en píxeles de la sombra vertical.

Un valor negativo colocará la sombra en la parte superior de la imagen.

blur

Opcional. Añadir un efecto de desvanecimiento a la sombra, en píxeles.

Cuanto mayor sea el valor, más fuerte será el efecto de desvanecimiento (la sombra se hará más grande y más pálida).

No se permite el uso de valores negativos.

Si no se especifica un valor, el valor predeterminado es 0 (los bordes de la sombra son claros).

spread

Opcional. Debe ser un valor en píxeles.

Un valor positivo hará que la sombra se expanda y se haga más grande, mientras que un valor negativo hará que la sombra se缩小.

Si no se especifica, el valor predeterminado es 0 (la sombra es del mismo tamaño que el elemento).

color

Opcional. Añadir color a la sombra.

Si no se especifica, el color depende del navegador (generalmente negro).

Detalles técnicos

Versión: Módulo de Efectos de Filtro de CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Páginas relacionadas

Referencia:Atributo filter de CSS

Referencia:Función blur() de CSS

Referencia:Función brightness() de CSS

Referencia:Función contrast() de CSS

Referencia:Función grayscale() de CSS

Referencia:Función hue-rotate() de CSS

Referencia:Función invert() de CSS

Referencia:Función opacity() de CSS

Referencia:Función saturate() de CSS

Referencia:Función sepia() de CSS