# Fondos desenfocados: enfoque suave bien hecho

[Canonical HTML page](https://gradiently.design/es/guide/blurred-background)

El desenfoque empuja un fondo hacia atrás para que el sujeto o las palabras pasen al frente. Muy poco parece accidental, y demasiado en el sitio equivocado parece barato. Así se juzga.

## The short version

- Un fondo desenfocado quita detalle para que el sujeto o el texto que hay delante se convierta en el foco claro.
- El desenfoque funciona mejor cuando es sutil, como la poca profundidad de campo de un objetivo, o lo bastante fuerte como para convertir el fondo en color suave, y parece accidental entre medias.
- Una foto muy desenfocada se convierte en un degradado de sus propios colores, que es una forma rápida de hacer un fondo que combine con una imagen.
- Las imágenes desenfocadas suelen mostrar banding y bordes desvaídos, que un poco de grano y una ligera ampliación solucionan.
- Un degradado construido con los colores de la foto, un velo oscuro o un panel liso pueden hacer el mismo trabajo que el desenfoque con más control.

Un **fondo desenfocado** quita detalle para que otra cosa pueda mandar: una cara en un retrato, un producto en una foto de tienda, un titular en un post, un panel en una interfaz. El desenfoque funciona porque el ojo va a lo que está más nítido. La habilidad está en la cantidad. Un poco de desenfoque parece un objetivo; mucho convierte el fondo en color suave; el término medio suele parecer una cámara que no enfocó.

## Cuándo ayuda un fondo desenfocado

- **Separar un sujeto.** Los retratos y las fotos de producto se leen con más claridad cuando el fondo es suave, como con un objetivo a gran apertura.
- **Dejar sitio a las palabras.** El texto sobre una foto desenfocada se lee mejor que sobre una nítida y detallada.
- **Rellenar un formato.** Una foto horizontal colocada en una historia vertical necesita algo por encima y por debajo; una copia desenfocada y ampliada de la misma foto rellena ese espacio con colores a juego.
- **Interfaces en capas.** Los paneles de cristal esmerilado desenfocan lo que tienen detrás, así que el panel se lee como una capa aparte mientras insinúa el contenido de debajo.
- **Privacidad en videollamadas.** Las apps de videollamada desenfocan la habitación que tienes detrás para que la atención se quede en tu cara.

- Foto 1200×900 (4:3): 1200 × 900
- Historia 1080×1920: 1080 × 1920

Una foto 4:3 en una historia deja grandes bandas vacías. Una copia desenfocada y ampliada de la foto detrás las rellena con los colores de la propia foto.

## Cuánto desenfoque usar

| Intensidad | Qué aspecto tiene | Úsalo para |
| --- | --- | --- |
| Ligera | Fondo reconocible, suavemente fuera de foco | Retratos, fotos de producto, profundidad natural |
| Media | Formas emborronadas pero aún identificables | Rara vez: suele parecer un fallo de enfoque |
| Fuerte | Formas desaparecidas, solo campos suaves de color | Detrás de texto, rellenos de formato, fondos ambientales |

Decídete por ligera o fuerte. El término medio es donde el desenfoque parece involuntario.

La intensidad del desenfoque es relativa al tamaño de la imagen: el mismo radio que apenas suaviza una foto de 4000 píxeles disolverá una de 600. Juzga a ojo al tamaño en que la gente lo verá. Para fondos de texto, ve lo bastante fuerte como para que no queden bordes detrás de las letras, porque las formas a medio desenfocar siguen compitiendo con las palabras; el [texto sobre imágenes](https://gradiently.design/es/guide/text-over-image) explica por qué.

## Una foto desenfocada es un degradado disfrazado

Desenfoca mucho una foto y lo que queda es su color, extendido en campos suaves: un atardecer se convierte en una mezcla de naranja a violeta, un bosque en verdes profundos con un cielo pálido arriba. Por eso las fotos desenfocadas hacen fondos tan naturales para las imágenes de las que salieron. También es una pista: podrías construir ese degradado directamente y obtener la misma armonía, un control más preciso y sin artefactos de compresión.

- Foto de atardecer, muy desenfocada: `linear-gradient(180deg, #312e81, #9d174d 45%, #f97316 75%, #fde68a)`
- Foto de bosque, muy desenfocada: `linear-gradient(180deg, #e0f2fe, #86efac 35%, #166534 70%, #052e16)`
- Mesa a la luz de una vela: `radial-gradient(ellipse at 50% 40%, #fcd34d, #b45309 45%, #1c1917 85%)`

Lo que deja un desenfoque fuerte: la paleta de la foto como degradado. Construirlos directamente da resultados más limpios.

Para sacar la paleta de una foto, mira la [paleta de color a partir de una imagen](https://gradiently.design/es/guide/color-palette-from-image). En Gradiently, [Encuentra el que combina con una imagen](/forge/match) lo hace en un paso: suelta una imagen y obtienes su paleta y los Marks más cercanos, o nuevos hechos a su imagen.

## Cómo arreglar los problemas habituales del desenfoque

1. **Amplía para ocultar los bordes desvaídos** El desenfoque atrae transparencia o píxeles oscuros de fuera de la imagen, así que los bordes se vuelven pálidos o grises. Escala la copia desenfocada un poco más allá del encuadre para que sus bordes suaves queden recortados.
2. **Añade grano para frenar el banding** Una imagen muy desenfocada es un conjunto de fundidos lentos y suaves, que muestran bandas al guardarse como JPEG o PNG de 8 bits. Una capa ligera de grano oculta los escalones; mira el [banding en degradados](https://gradiently.design/es/guide/gradient-banding).
3. **Oscurece o aclara para el texto** El desenfoque quita detalle, no brillo. Si el texto aún sufre, coloca una veladura oscura o clara sobre el desenfoque hasta que el contraste aguante.
4. **Mantén viva la saturación** El desenfoque promedia los colores entre sí, lo que puede apagarlos. Un pequeño aumento de saturación tras desenfocar devuelve el color.

## Fondos desenfocados en CSS

En la web hay dos herramientas. `filter: blur()` desenfoca un elemento, lo que va bien para una copia desenfocada de una imagen detrás de la real. `backdrop-filter: blur()` desenfoca lo que hay detrás de un elemento, lo que crea paneles de cristal esmerilado. Ambos cuestan tiempo de pintado, y `backdrop-filter` sobre contenido que se desplaza cuesta más; mira el [rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance).

```css
/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
```

Pon `--cover-image` con el `url()` de la imagen en el elemento. Escalar oculta los bordes pálidos que crea el desenfoque.

Los paneles esmerilados sobre fondos coloridos son la base del [glassmorphism](https://gradiently.design/es/guide/glassmorphism), que tiene sus propias reglas de contraste y bordes.

## Alternativas al desenfoque

### Desenfoque

- Mantiene automáticamente los colores de la foto
- Puede mostrar banding, desvanecerse en los bordes y apagar el color
- Sigue variando en brillo detrás del texto
- Cuesta tiempo de pintado cuando se usa en vivo en la web

### Un degradado diseñado

- Usa la paleta de la foto, elegida a propósito
- Limpio, con grano añadido donde hace falta
- Una zona tranquila y uniforme colocada justo detrás del texto
- Unos pocos bytes de CSS, o una exportación nítida

Un velo oscuro, un panel liso detrás de las palabras o un tratamiento [duotono](https://gradiently.design/es/guide/duotone-effect) de la foto son las otras opciones habituales. El desenfoque es lo más rápido; un fondo diseñado suele ser lo más controlado.

## FAQ

### ¿Cuándo debo usar un fondo desenfocado?

Cuando algo delante necesita mandar: un sujeto en una foto, palabras en un post, un panel en una interfaz, o una foto colocada dentro de un formato que no llena.

### ¿Cuánto debo desenfocar un fondo?

O poco, para que parezca una profundidad de campo natural, o mucho, para que solo quede color suave. El desenfoque medio suele parecer un fallo de enfoque.

### ¿Por qué mi fondo desenfocado tiene bordes grises?

El desenfoque atrae píxeles vacíos u oscuros de fuera de la imagen. Amplía un poco la capa desenfocada más allá del encuadre para que esos bordes queden recortados.

### ¿Por qué mi fondo desenfocado se ve escalonado?

Los fundidos lentos y suaves muestran bandas cuando se guardan en formatos de 8 bits. Añade una capa tenue de grano antes de exportar.

### ¿Cómo desenfoco un fondo en CSS?

Usa `filter: blur()` en una copia de la imagen detrás del contenido, o `backdrop-filter: blur()` en un panel para desenfocar lo que tenga detrás.