La versión corta
- 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.
En esta página
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
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 |
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 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.
Para sacar la paleta de una foto, mira la paleta de color a partir de una imagen. En Gradiently, Encuentra el que combina con una imagen 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.
- 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.
/* 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);
}--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, 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 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
