Docs ejecutables de CSS: Blur y filter

Q: ¿Cómo desenfoco un elemento en CSS?

Usa filter: blur(5px);. La longitud es el radio del desenfoque: 0 es nítido y los valores mayores desenfocan más. Desenfoca el elemento y todo lo que contiene, incluidos su texto y sus imágenes.

Q: ¿Cómo desenfoco el fondo detrás de un elemento?

Usa backdrop-filter: blur(10px); en el elemento, con un fondo parcialmente transparente como rgb(255 255 255 / 0.5). El contenido propio del elemento sigue nítido y lo que hay detrás se desenfoca: el efecto de vidrio esmerilado.

Q: ¿Qué diferencia hay entre drop-shadow() y box-shadow?

box-shadow siempre sigue la caja rectangular del elemento. filter: drop-shadow() sigue la forma visible, incluidas las zonas transparentes de un PNG o un SVG, así que la sombra de un ícono tiene el contorno del ícono.

Q: ¿Cómo pongo una imagen en blanco y negro con CSS?

Usa filter: grayscale(100%); (o grayscale(1)). Agrega una transición y filter: grayscale(0) en hover para recuperar el color.

Q: ¿Puedo usar varios filtros a la vez?

Sí, enuméralos separados por espacios: filter: grayscale(1) brightness(1.2) blur(1px);. Se aplican en orden, así que el orden puede cambiar el resultado. Una segunda declaración filter reemplaza a la primera.

Desenfocar un elemento

filter: blur() recibe una longitud, el radio del desenfoque. Cuanto mayor es, más desenfocado queda el elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

filter funciona en cualquier elemento, no solo en imágenes: un div desenfocado también desenfoca su texto, su borde y sus hijos. Fíjate en los bordes suaves de las imágenes desenfocadas: el desenfoque extiende la imagen hacia afuera y la mezcla con la zona transparente que la rodea. La solución está más abajo, en "El problema de los bordes desenfocados".

Desenfocar el fondo: backdrop-filter

Para desenfocar lo que hay detrás de un elemento (un panel de vidrio esmerilado sobre una foto o una página), usa backdrop-filter. El contenido propio del elemento sigue nítido. Necesita un fondo translúcido para que se vea el desenfoque:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

Las rayas y los círculos se ven nítidos alrededor del panel y desenfocados detrás de él, mientras que el texto del panel no cambia. Mantén el texto legible: un tono más claro o más oscuro en el color de fondo ayuda sobre imágenes recargadas.

Todas las funciones de filter, en vivo

Mueve cualquier control deslizante. La línea debajo de la imagen es el valor exacto de filter, listo para copiar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Solo se escriben las funciones que moviste de su valor neutro, así el valor queda corto. brightness(1) o blur(0px) no cambian nada, así que no hay motivo para enumerarlas.

Funciones de filter

Función	Valor neutro	Qué hace	Ejemplo
`blur(r)`	`0`	desenfoque gaussiano con radio r	`blur(4px)`
`brightness(n)`	`1`	más oscuro por debajo de 1, más claro por encima	`brightness(0.7)`
`contrast(n)`	`1`	más plano por debajo de 1, más intenso por encima	`contrast(1.3)`
`grayscale(n)`	`0`	1 (o 100%) es gris por completo	`grayscale(100%)`
`sepia(n)`	`0`	tono marrón cálido	`sepia(0.6)`
`saturate(n)`	`1`	0 es gris, por encima de 1 más vivo	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	desplaza todos los tonos por la rueda de color	`hue-rotate(90deg)`
`invert(n)`	`0`	1 es un negativo de color completo	`invert(1)`
`opacity(n)`	`1`	como la propiedad `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		una sombra que sigue la forma	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Los números también pueden ser porcentajes (grayscale(100%) es igual a grayscale(1)). Varias funciones van en un mismo valor, separadas por espacios, y se aplican en orden: filter: grayscale(1) sepia(1) da un tinte marrón, mientras que sepia(1) grayscale(1) termina en un gris simple.

drop-shadow sigue la forma

box-shadow siempre es un rectángulo (como mucho con esquinas redondeadas). drop-shadow() se dibuja a partir de los píxeles visibles, así que un ícono transparente recibe una sombra con el contorno del ícono:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

La primera estrella proyecta una sombra cuadrada desde su caja invisible. La segunda proyecta una con forma de estrella. A diferencia de box-shadow, drop-shadow() no tiene valor de expansión ni inset; la página de box-shadow los explica.

El problema de los bordes desenfocados

Una imagen desenfocada se desvanece en sus bordes, porque el desenfoque atrae los píxeles transparentes que la rodean. Para mantener un borde nítido (en un fondo principal desenfocado, por ejemplo), pon la imagen en un contenedor con overflow: hidden y agranda un poco la imagen para que el borde suave quede recortado:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Efectos hover con filter

filter se puede animar con transition, así que una pared de logos que pasa de gris a color o una tarjeta atenuada hasta el hover son dos reglas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Pasa el mouse (o llega con Tab) por un recuadro y su color aparece poco a poco.

Conviene saber

Rendimiento. Los radios de desenfoque grandes sobre áreas grandes son lo más costoso, sobre todo backdrop-filter en elementos que se mueven o se desplazan. Pruébalo en un teléfono.
Legibilidad. Nunca desenfoques un texto que la gente necesita leer, y comprueba el contraste del texto sobre un panel esmerilado.
Apilamiento. Cualquier filter distinto de none crea un nuevo contexto de apilamiento y se convierte en el bloque contenedor de los descendientes con position: fixed, igual que transform.

Errores comunes

filter: blur(5). El radio necesita unidad: blur(5px).
Usar filter: blur() para un panel esmerilado. Desenfoca el propio texto del panel. Usa backdrop-filter con un fondo transparente.
Un backdrop-filter que no muestra nada. El fondo del elemento debe ser al menos parcialmente transparente, y debe haber algo detrás.
Dos declaraciones filter. La segunda reemplaza a la primera. Pon todas las funciones en un mismo valor.
Sombras con forma de caja en íconos transparentes. Usa filter: drop-shadow() en lugar de box-shadow.

Preguntas frecuentes

¿Cómo desenfoco un elemento en CSS?

Usa filter: blur(5px);. La longitud es el radio del desenfoque: 0 es nítido y los valores mayores desenfocan más. Desenfoca el elemento y todo lo que contiene, incluidos su texto y sus imágenes.

¿Cómo desenfoco el fondo detrás de un elemento?

Usa backdrop-filter: blur(10px); en el elemento, con un fondo parcialmente transparente como rgb(255 255 255 / 0.5). El contenido propio del elemento sigue nítido y lo que hay detrás se desenfoca: el efecto de vidrio esmerilado.

¿Qué diferencia hay entre drop-shadow() y box-shadow?

box-shadow siempre sigue la caja rectangular del elemento. filter: drop-shadow() sigue la forma visible, incluidas las zonas transparentes de un PNG o un SVG, así que la sombra de un ícono tiene el contorno del ícono.

¿Cómo pongo una imagen en blanco y negro con CSS?

Usa filter: grayscale(100%); (o grayscale(1)). Agrega una transición y filter: grayscale(0) en hover para recuperar el color.

¿Puedo usar varios filtros a la vez?

Sí, enuméralos separados por espacios: filter: grayscale(1) brightness(1.2) blur(1px);. Se aplican en orden, así que el orden puede cambiar el resultado. Una segunda declaración filter reemplaza a la primera.

Conceptos relacionados