L’essentiel en bref
- Un dégradé liquide semble coulé parce que ses couleurs restent des bandes distinctes qui se courbent, tourbillonnent, s’affinent et s’épaississent, au lieu de se fondre uniformément les unes dans les autres.
- La méthode habituelle consiste à partir de rayures droites de couleur et à les déformer avec un filtre de déformation, de fluidité ou de déplacement.
- Sur le web, un filtre SVG qui associe feTurbulence et feDisplacementMap peut transformer un dégradé CSS rayé en surface marbrée et liquide.
- De fines bandes claires le long des courbes évoquent la lumière sur une surface mouillée et rendent l’effet bien plus convaincant.
- Les dégradés liquides sont chargés : le texte a besoin d’une zone calme ou d’une grande forme simple là où le flux ralentit.
Sur cette page
Un dégradé liquide est une couleur qui semble coulée plutôt que fondue : des bandes de teinte qui s’enroulent les unes autour des autres, s’étirent ici et s’accumulent là, avec un reflet de lumière le long des courbes. Pensez aux peintures acryliques coulées, aux papiers marbrés des vieux livres, à l’huile sur une route mouillée ou à l’encre versée dans l’eau. Le plus surprenant, c’est la façon de les obtenir. On n’y arrive pas en fondant des couleurs : on part de rayures nettes et on les courbe. C’est pourquoi un outil de dégradé classique ne produit jamais tout à fait ce rendu à lui seul.
Ce qui donne à la couleur un air liquide
- Des bandes, pas des fondus. Chaque couleur garde son identité sous forme de ruban. Un large fondu doux évoque l’air, pas le liquide.
- Une épaisseur variable. La même bande gonfle et s’amincit en avançant, comme la peinture qui coule.
- Aucun angle. Chaque virage est une courbe. Un seul angle vif brise l’illusion.
- De la lumière sur les courbes. Une fine ligne claire le long de quelques bords évoque un reflet mouillé.
- Un seul sens d’écoulement. Des tourbillons qui penchent tous du même côté semblent issus d’une seule coulée.
Quatre looks de dégradé liquide
Ces échantillons sont la matière première : les bandes de couleur que vous allez courber. Chacun est une seule valeur CSS, à copier comme point de départ pour l’une des méthodes ci-dessous.
Regardez la couleur claire. Dans une peinture coulée, le ton le plus clair est en général la bande la plus fine, et c’est lui qui fait paraître riches les couleurs sombres autour. Utilisez-le comme un reflet, pas comme un aplat.
Créer un dégradé liquide dans un outil de design
- 1
Dessinez des rayures
Remplissez une surface plus grande que votre taille finale avec cinq à huit bandes de couleur en biais. Faites certaines bandes larges et d’autres très fines.
- 2
Déformez l’ensemble
Utilisez une déformation, un tourbillon ou une ondulation pour courber les rayures en un large S. Restez doux au premier passage.
- 3
Poussez avec un pinceau de fluidité
Avec un grand pinceau doux, tirez les bandes dans une seule direction pour créer tourbillons et flaques. Travaillez du grand au petit.
- 4
Ajoutez quelques reflets
Peignez de fines lignes claires le long de deux ou trois courbes, en suivant le flux, à faible opacité.
- 5
Recadrez la meilleure partie
La déformation laisse des bords désordonnés. Recadrez sur la zone la plus intéressante et adaptez-la à votre format.
- 6
Finissez avec du grain
Une légère couche de bruit masque les bandes dues à l’étirement et donne à la surface un côté tactile.
Les noms varient selon les logiciels, mais la plupart des éditeurs ont une déformation et un outil fluidité ou doigt. Les dégradés dans Photoshop et les dégradés dans Procreate détaillent les outils de chacun.
Un dégradé liquide en SVG et CSS
Sur le web, un filtre SVG peut se charger de la déformation. feTurbulence génère un bruit lisse, et feDisplacementMap s’en sert pour déplacer les pixels d’un dégradé rayé. Une baseFrequency basse donne de larges tourbillons lents ; une scale élevée pousse les bandes plus loin.
<svg width="0" height="0" style="position:absolute">
<filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
<feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<div class="liquid"></div>
<style>
.liquid {
width: 100%;
aspect-ratio: 16 / 9;
background: repeating-linear-gradient(115deg,
#1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
filter: url(#liquid);
}
</style>Animer un dégradé liquide
Le liquide est le style de dégradé qui demande presque à bouger. Une coulée qui dérive lentement dans le hero d’un site ou dans une story paraît vivante. Gardez une vitesse faible, comme si la peinture était épaisse, et bouclez pour que la fin rejoigne le début. Animer la turbulence en direct est lourd : une courte boucle vidéo exportée est en général la meilleure option. Une boucle de 8 à 15 secondes laisse à la coulée le temps de voyager sans que personne ne repère la répétition, et un MP4 en 1080×1920 sert les stories, les Reels et les fonds d’écran de téléphone à partir d’un seul fichier. Les fonds dégradés animés présentent des approches plus légères.
Poser des mots sur un dégradé liquide
Combat les mots
- De fines bandes très contrastées derrière le titre
- Des tourbillons partout, avec la même densité
- Un petit texte sur la flaque la plus chargée
- Des reflets qui traversent les lettres
Porte les mots
- Une bande large et calme là où le flux ralentit
- Des tourbillons chargés sur les bords, le calme au centre
- Une typographie grande et grasse, avec peu de mots
- Des reflets tenus à l’écart du texte
Un seul mot, une typographie grasse, posé sur une étendue de couleur calme.
Une pochette carrée de sortie. Les looks liquides vont bien à la musique, car ils évoquent le son rendu visible.
Les Marks de Gradiently sont des fonds vivants dont les matières peuvent couler et dériver, et chacun place automatiquement la partie la plus calme de sa surface derrière vos mots. Pro les exporte en GIF, MP4 ou WebM : un look liquide peut devenir une story ou une boucle de hero sans écrire de shader. Lisez du texte sur un dégradé pour la question de la lisibilité.
Les questions qu’on nous pose
Comment créer un dégradé liquide ?
Dessinez des rayures de couleur, puis courbez-les avec un outil de déformation, de tourbillon ou de fluidité jusqu’à ce qu’elles tourbillonnent. Ajoutez de fins reflets clairs le long de quelques courbes et un peu de grain.
Peut-on faire un dégradé liquide en CSS ?
Surtout avec l’aide du SVG. Appliquez à un dégradé CSS rayé un filtre SVG utilisant feTurbulence et feDisplacementMap pour le courber en motif liquide.
Quelle différence entre un dégradé liquide et un dégradé en maillage ?
Un dégradé en maillage fond les couleurs en douceur sur une grille. Un dégradé liquide garde les couleurs en bandes distinctes qui s’enroulent et s’étirent, comme de la peinture coulée.
Quelles couleurs pour un dégradé liquide ?
Une base sombre, deux couleurs moyennes fortes et un ton clair réservé aux bandes fines. C’est le contraste entre les bandes sombres épaisses et les bandes claires fines qui évoque le liquide.
É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