L’essentiel en bref
- Un arrière-plan flou retire du détail pour que le sujet ou le texte placé devant devienne le point de focalisation.
- Le flou fonctionne mieux quand il est soit subtil, comme la faible profondeur de champ d’un objectif, soit assez fort pour transformer l’arrière-plan en couleur douce, et paraît accidentel entre les deux.
- Une photo très floutée devient un dégradé de ses propres couleurs, ce qui permet de faire vite un arrière-plan assorti à une image.
- Les images floues montrent souvent du banding et des bords pâlis, qu’un peu de grain et un léger agrandissement corrigent.
- Un dégradé construit à partir des couleurs de la photo, un voile sombre ou un panneau uni peut faire le même travail que le flou, avec plus de contrôle.
Sur cette page
Un arrière-plan flou retire du détail pour qu’autre chose prenne la tête : un visage dans un portrait, un produit dans une photo de boutique, un titre sur un post, un panneau dans une interface. Le flou marche parce que l’œil va vers ce qui est le plus net. Tout est dans la dose. Un peu de flou évoque un objectif ; beaucoup transforme l’arrière-plan en couleur douce ; entre les deux, on dirait le plus souvent un appareil qui a raté la mise au point.
Quand un arrière-plan flou aide
- Détacher un sujet. Les portraits et les photos de produit se lisent plus clairement quand l’arrière-plan est doux, comme avec un objectif grande ouverture.
- Faire de la place aux mots. Un texte sur une photo floue se lit plus facilement que sur une photo nette et détaillée.
- Remplir un format. Une photo en paysage placée dans une story verticale a besoin de quelque chose au-dessus et en dessous ; une copie floue et agrandie de la même photo remplit cet espace dans des couleurs assorties.
- Interfaces en couches. Les panneaux en verre dépoli floutent ce qui se trouve derrière eux : le panneau se lit ainsi comme une couche distincte tout en laissant deviner le contenu dessous.
- Confidentialité en visio. Les applications d’appel vidéo floutent la pièce derrière vous pour que l’attention reste sur votre visage.
Photo 1200×900 (4:3)
1200 × 900
Story 1080×1920
1080 × 1920
Quelle dose de flou
| Intensité | À quoi cela ressemble | À utiliser pour |
|---|---|---|
| Légère | Arrière-plan reconnaissable, doucement flou | Portraits, photos de produit, profondeur naturelle |
| Moyenne | Formes étalées mais encore identifiables | Rarement : tend à ressembler à une erreur de mise au point |
| Forte | Formes disparues, seulement de doux champs de couleur | Derrière du texte, remplissage de formats, arrière-plans d’ambiance |
L’intensité du flou est relative à la taille de l’image : le même rayon qui adoucit à peine une photo de 4 000 pixels dissoudra une photo de 600 pixels. Jugez à l’œil à la taille où on la verra. Pour les arrière-plans de texte, allez assez loin pour qu’il ne reste aucun bord derrière les lettres, car des formes à moitié floues concurrencent encore les mots ; le texte sur une image explique pourquoi.
Une photo floue est un dégradé déguisé
Floutez fortement une photo et il reste sa couleur, étalée en champs doux : un coucher de soleil devient un fondu orange-violet, une forêt devient des verts profonds avec un ciel pâle en haut. C’est pourquoi les photos floues font des arrière-plans si naturels pour les images dont elles viennent. C’est aussi un indice : vous pourriez construire ce dégradé directement et obtenir la même harmonie, un contrôle plus fin et aucun artefact de compression.
Pour extraire la palette d’une photo, voyez la palette de couleurs à partir d’une image. Dans Gradiently, Assortir une image le fait en une étape : déposez une image et vous obtenez sa palette et les Marks les plus proches, ou de nouveaux Marks à sa ressemblance.
Régler les problèmes de flou habituels
- 1
Agrandir pour masquer les bords pâlis
Le flou attire de la transparence ou des pixels sombres de l’extérieur de l’image, et les bords deviennent pâles ou gris. Agrandissez légèrement la copie floue au-delà du cadre pour que ses bords doux soient rognés.
- 2
Ajouter du grain pour éviter le banding
Une image très floue est un ensemble de fondus lents et lisses, qui présentent du banding une fois enregistrés en JPEG ou PNG 8 bits. Une légère couche de grain masque les marches ; voyez le banding des dégradés.
- 3
Assombrir ou éclaircir pour le texte
Le flou retire du détail mais pas de la luminosité. Si le texte peine encore, posez un voile sombre ou clair sur le flou jusqu’à ce que le contraste tienne.
- 4
Garder une saturation vive
Le flou fait la moyenne des couleurs, ce qui peut les ternir. Un petit gain de saturation après le flou redonne de la couleur.
Arrière-plans flous en CSS
Sur le web, il y a deux outils. filter: blur() floute un élément, ce qui convient pour une copie floue d’une image derrière la vraie. backdrop-filter: blur() floute ce qui se trouve derrière un élément, ce qui fait les panneaux en verre dépoli. Les deux coûtent du temps de rendu, et backdrop-filter sur un contenu qui défile coûte le plus ; voyez les performances des dégradés 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 sur le url() de l’image dans l’élément. L’agrandissement masque les bords pâles que crée le flou.Les panneaux dépolis sur des arrière-plans colorés sont la base du glassmorphism, qui a ses propres règles de contraste et de bordures.
Alternatives au flou
Flou
- Garde automatiquement les couleurs de la photo
- Peut présenter du banding, pâlir sur les bords et ternir la couleur
- La luminosité varie encore derrière le texte
- Coûte du temps de rendu quand il est actif sur le web
Un dégradé dessiné
- Utilise la palette de la photo, choisie exprès
- Net, avec du grain ajouté au besoin
- Une zone calme et uniforme placée exactement derrière le texte
- Quelques octets de CSS, ou un export net
Un voile sombre, un panneau uni derrière les mots ou un traitement duotone de la photo sont les autres choix courants. Le flou est le plus rapide ; un arrière-plan dessiné est en général le plus maîtrisé.
Les questions qu’on nous pose
Quand utiliser un arrière-plan flou ?
Quand quelque chose devant doit prendre la tête : un sujet dans une photo, des mots sur un post, un panneau dans une interface, ou une photo placée dans un format qu’elle ne remplit pas.
Quelle dose de flou pour un arrière-plan ?
Soit légère, pour un effet naturel de profondeur de champ, soit forte, pour qu’il ne reste que de la couleur douce. Un flou moyen tend à ressembler à une erreur de mise au point.
Pourquoi mon arrière-plan flou a-t-il des bords gris ?
Le flou attire des pixels vides ou sombres de l’extérieur de l’image. Agrandissez légèrement la couche floue au-delà du cadre pour rogner ces bords.
Pourquoi mon arrière-plan flou paraît-il en marches d’escalier ?
Les fondus lisses et lents présentent du banding quand on enregistre en formats 8 bits. Ajoutez une légère couche de grain avant d’exporter.
Comment flouter un arrière-plan en CSS ?
Utilisez filter: blur() sur une copie de l’image derrière le contenu, ou backdrop-filter: blur() sur un panneau pour flouter ce qui se trouve derrière.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
