Función blur() de CSS

Definición y uso

Función blur() de CSS blur() La función de filtro aplica un efecto borroso al elemento. Cuanto mayor sea el valor, más fuerte será el efecto borroso.

Si no se especifica un valor, se utiliza el valor predeterminado 0.

Ejemplo

Ejemplo 1

Aplicar diferentes efectos borrosos a los elementos <h1> y <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Prueba por ti mismo

Ejemplo 2

Crear fondo borroso:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Prueba por ti mismo

Sintaxis de CSS

blur(radius)

Detalles técnicos

Compatibilidad del navegador

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

Páginas relacionadas

Referencia:Atributo filter de CSS

Referencia:Función brightness() de CSS

Referencia:Función contrast() de CSS

Referencia:Función drop-shadow() 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