blur()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since septiembre de 2016.
La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un <filter-function>.
Pruébalo
filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Sintaxis
blur(radio)
Parámetros
radio-
El radio del desenfoque, especificado como
<length>. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de0deja la entrada sin cambios. El valor de laguna para la interpolación es0.
Ejemplos
css
blur(0) /* Sin efecto */
blur(8px) /* Desenfoque con 8px de radio */
blur(1.17rem) /* Desenfoque con 1.17rem de radio */