L’essentiel en bref
- Un dégradé flou s’obtient en plaçant quelques formes de couleur douces sur un fond puis en les floutant jusqu’à ce qu’il ne reste aucun bord.
- Les dégradés flous diffèrent des dégradés aurore : l’aurore, ce sont des rubans de lumière sur un ciel sombre, alors qu’un dégradé flou est une couleur diffuse sans direction ni structure.
- Le rayon du flou doit être grand par rapport au canevas, environ 10 à 20 % de son petit côté, sinon les formes se lisent encore comme des taches.
- Trois ou quatre couleurs voisines sur le cercle chromatique se floutent proprement ; des couleurs opposées deviennent grises là où elles se chevauchent.
- Une couleur floutée et lisse crée facilement des bandes, donc une fine couche de grain doit être ajoutée par-dessus avant l’export.
Sur cette page
Un dégradé flou est une couleur sans bords : quelques formes douces sur un fond, floutées jusqu’à ce qu’il ne reste qu’une lumière qui glisse d’une teinte à l’autre. On dirait une photo prise à travers un verre dépoli, ou un objectif hors mise au point sur une ville illuminée. Cette douceur explique pourquoi il convient aux applications de bien-être, à la musique, aux soins de la peau, à la tech apaisée et aux fonds d’écran. La méthode est simple : d’abord les formes, puis beaucoup de flou, puis du grain. Les détails ci-dessous font la différence entre rêveur et barbouillé.
Dégradés flous, dégradés aurore et mesh gradients
On confond ces trois styles parce qu’ils ont tous l’air doux. Ils viennent d’idées différentes, et choisir le bon change le brief.
À quoi il ressemble
Construit à partir de
À quoi il ressemble
Construit à partir de
À quoi il ressemble
Construit à partir de
À quoi il ressemble
Construit à partir de
Créer un dégradé flou
- 1
Choisissez un fond
Un blanc cassé pâle pour un effet aérien, une encre profonde pour un effet lumineux. Le fond remplit chaque espace laissé par les formes.
- 2
Prenez trois ou quatre couleurs voisines
Des couleurs proches sur le cercle, comme rose, lilas et bleu ciel, se mélangent en teintes intermédiaires propres. Lisez les couleurs analogues pour d’autres associations.
- 3
Dessinez de grandes formes qui se chevauchent
Trois à cinq cercles ou ovales, chacun couvrant un quart à la moitié du canevas. Laissez-en dépasser certains des bords.
- 4
Floutez fort
Appliquez un flou gaussien d’environ 10 à 20 % du petit côté du canevas. Sur un post de 1080 pixels de large, cela fait environ 110 à 220 pixels.
- 5
Ajoutez du grain
Une fine couche de bruit à 3 à 6 % d’opacité masque le banding et évite l’aspect plastique.
- 6
Vérifiez en taille téléphone
Réduisez l’image. Si une forme a encore un bord visible, floutez davantage ou agrandissez la forme.
Recettes de couleurs pour dégradés flous
Chaque échantillon approche le rendu final en un seul dégradé, pour que vous puissiez le copier directement en CSS ou utiliser ses couleurs pour vos formes. Des dégradés radiaux elliptiques décentrés s’approchent étonnamment d’un vrai flou.
Choisissez la famille selon ce qui sera posé dessus. Les flous pâles portent bien un texte foncé et conviennent aux soins de la peau, à la papeterie, au bien-être et aux couvertures éditoriales. Les flous sombres font rayonner un texte clair et conviennent à la vie nocturne, à la musique et aux événements tardifs. Un flou neutre comme le lin sert de toile de fond discrète pour des photos produit, où la couleur ne doit jamais faire concurrence à l’objet. Pour d’autres palettes douces, voyez les dégradés rêveurs.
Quelle intensité de flou pour un dégradé flou
La plupart des dégradés flous échouent parce qu’ils ne sont pas assez flous. Une forme floutée de 30 pixels sur un canevas de 1080 pixels reste une forme au bord doux, qui se lit comme une tache. L’effet demande un flou assez grand pour qu’on ne sache plus où une forme se termine.
Taille
Flou de départ
Taille
Flou de départ
Taille
Flou de départ
Taille
Flou de départ
Taille
Flou de départ
Un dégradé flou en CSS
Sur le web, deux voies existent. Des dégradés radiaux superposés qui s’estompent vers la transparence ne coûtent presque rien et s’affichent instantanément. De vrais éléments floutés paraissent plus doux et peuvent dériver, mais coûtent plus cher à dessiner. Pour un fond statique, les couches suffisent généralement.
/* Route 1: layered radial gradients, no filter */
.blurry {
background-color: #f8fafc;
background-image:
radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}
/* Route 2: real shapes, blurred */
.blurry-live {
position: relative;
overflow: hidden;
background: #f8fafc;
}
.blurry-live .blob {
position: absolute;
width: 50vmax;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(80px);
opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }S’il vous faut un panneau dépoli au-dessus d’un fond flouté plutôt que le fond lui-même, c’est backdrop-filter, traité dans backdrop-filter en CSS.
Pourquoi les dégradés flous font bon marché, et la solution
Barbouillé
- Des formes encore visibles comme des taches douces
- Des couleurs complémentaires qui grisent là où elles se chevauchent
- Une composition régulière et centrée
- Parfaitement lisse, avec du banding dans les fondus
- Des mots posés sur la zone la plus saturée
Rêveur
- Un flou si large qu’aucun bord ne survit
- Des teintes voisines qui se mélangent en intermédiaires propres
- Une masse de couleur dominante, décentrée
- Un grain fin sur l’ensemble
- Des mots sur la zone la plus pâle ou la plus profonde
Le banding est le piège dans lequel tout le monde tombe, car un flou crée de longs fondus doux sur beaucoup de pixels. Un peu de grain règle le problème ; le banding des dégradés explique pourquoi. Et si deux de vos couleurs se rejoignent dans le gris, remplacez l’une par une voisine, comme décrit dans les dégradés ternes.
Une Story en 1080×1920 pour une application de méditation. Couleur douce, mots courts, rien qui ait un bord.
Les Marks de Gradiently comprennent des matières douces et diffuses avec du grain intégré, et ils gardent calme la zone derrière vos mots, pour qu’un effet flou n’avale jamais le titre. Vous pouvez créer gratuitement avec n’importe quel Mark libre dans le Studio.
Les questions qu’on nous pose
Comment créer un dégradé flou ?
Placez trois à cinq grandes formes de couleurs voisines sur un fond uni, appliquez un fort flou gaussien d’environ 10 à 20 % du petit côté du canevas, puis ajoutez une légère couche de grain.
Quelle différence entre un dégradé flou et un dégradé aurore ?
Un dégradé aurore a des rubans de lumière avec un flux clair, généralement sur un ciel sombre. Un dégradé flou est une couleur diffuse sans direction ni structure visible.
Peut-on faire un dégradé flou uniquement en CSS ?
Oui. Superposez plusieurs dégradés radiaux qui s’estompent vers la transparence, ou floutez des cercles en position absolue avec filter: blur().
Pourquoi mon dégradé flou présente-t-il des bandes ?
Les longs fondus doux ont peu de nuances distinctes, donc ils montrent des rayures. Ajoutez un grain fin et exportez en PNG plutôt qu’en JPEG compressé.
É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