L’essentiel en bref
- Un fond d’écran dégradé est un mélange doux de couleurs utilisé comme arrière-plan d’ordinateur ou de téléphone, choisi parce qu’il reste calme derrière les icônes, les widgets et les fenêtres.
- Créez les fonds d’écran d’ordinateur à la résolution exacte de votre écran et dans sa forme, en général 16:9, et les fonds de téléphone en hauteur, avec de la marge au-dessus du 9:16.
- Les grands dégradés lisses sont ceux où le banding se voit le plus : ajoutez un grain fin et exportez en PNG plutôt qu’en JPEG compressé.
- Placez la partie la plus claire ou la plus chargée du dégradé loin de l’endroit où se trouvent les icônes, l’horloge et les widgets.
- Mélanger les couleurs en OKLCH garde les dégradés arc-en-ciel et complémentaires vifs au lieu de les laisser griser au milieu.
Sur cette page
Un fond d’écran dégradé est un mélange doux de couleurs utilisé comme arrière-plan d’un ordinateur ou d’un téléphone. Il fonctionne parce qu’il n’a aucun détail qui rivalise avec les icônes, les widgets et les fenêtres, et qu’il change toute l’ambiance d’un écran par la seule couleur. Pour en réussir un : choisissez une famille de trois à cinq couleurs, mélangez-les en douceur avec la lumière là où l’œil doit se reposer, exportez à la taille et à la forme exactes de votre écran, et ajoutez un grain fin pour que le mélange reste lisse au lieu de montrer des rayures.
Vous trouverez ci-dessous des dégradés prêts à copier, la méthode pour créer les vôtres, et comment adapter chacun à un écran. Pour d’autres associations de couleurs, voir les combinaisons de couleurs de dégradé.
Idées de fonds d’écran dégradés avec codes
Chacun est un simple dégradé CSS : vous pouvez donc le prévisualiser dans un navigateur, adapter les couleurs et l’exporter à n’importe quelle taille. Ils sont classés approximativement du plus clair au plus sombre.
Comment créer un fond d’écran dégradé
- 1
Trouvez la taille de votre écran
Consultez les réglages d’affichage pour la résolution, et les caractéristiques de votre téléphone pour la taille de son écran. Créez à cette taille exacte, ou plus grand dans la même forme.
- 2
Choisissez une famille de couleurs
Trois à cinq couleurs avec une relation claire : des teintes voisines pour le calme, une paire chaude et froide pour l’énergie. Les couleurs analogues sont la voie la plus simple.
- 3
Placez la lumière
Décidez où va la zone la plus claire. Sur un ordinateur, loin des icônes ; sur un téléphone, en général derrière l’horloge ou en bas au centre.
- 4
Mélangez en douceur
Espacez les arrêts, et mélangez en OKLCH si les couleurs sont éloignées sur le cercle, pour que le milieu ne vire pas au gris.
- 5
Ajoutez du grain
Une fine couche de bruit à faible intensité. Elle masque le banding et rend la couleur plus riche.
- 6
Exportez en PNG
Un export sans perte garde le mélange lisse. Un JPEG fortement compressé est la cause la plus courante des rayures.
Si vous voulez en construire un dans le navigateur, appliquez un dégradé sur une page plein écran et mélangez-le en OKLCH. Les navigateurs modernes prennent en charge l’interpolation des couleurs dans les dégradés, qui garde les couleurs vives vives jusqu’au milieu du mélange.
<!doctype html>
<html>
<head>
<style>
html, body { margin: 0; height: 100%; }
body {
background:
radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
}
</style>
</head>
<body></body>
</html>Formes de fonds d’écran pour ordinateur et téléphone
Un fond d’écran est plus beau quand il est fait pour la forme de son écran, pas recadré à partir d’un autre. La plupart des écrans d’ordinateur sont en 16:9 ou proches ; les portables sont souvent un peu plus hauts, autour du 16:10. Les téléphones sont bien plus hauts que le 16:9 : beaucoup sont autour du 9:19,5. Créez chaque forme séparément et laissez la lumière tomber au bon endroit pour chacune.
Ordinateur 16:9
1920 × 1080
Portable 16:10
1600 × 1000
Téléphone haut, environ 9:19,5
900 × 1950
Avec deux écrans ou plus, vous pouvez soit définir une image par écran, soit créer une seule image large de la largeur cumulée des deux. La seconde option laisse un seul dégradé s’écouler sur le bureau, mais la jonction entre les écrans le coupera : gardez la lumière loin de ce bord.
Les téléphones ajoutent deux complications : l’horloge de l’écran de verrouillage et les widgets occupent le tiers supérieur, et certains téléphones déplacent légèrement le fond d’écran quand vous inclinez l’appareil, ce qui rogne les bords. La taille des fonds d’écran de téléphone détaille les deux.
Garder les fonds d’écran dégradés bien lisses
Les fonds d’écran s’affichent en grand, souvent sur des écrans lumineux et de grande qualité, ce qui en fait l’épreuve la plus sévère pour un dégradé. Les deux problèmes que vous verrez sont le banding, où un mélange lisse se casse en paliers visibles, et les milieux boueux, où deux couleurs fortes se rencontrent dans du gris.
Provoque rayures et boue
- Des couleurs proches et sombres sur une grande surface
- Une forte compression JPEG
- Des couleurs complémentaires mélangées en sRGB
- Un mélange parfaitement lisse, sans bruit
Garde la douceur
- Une plage de couleurs suffisante dans le mélange
- Un export PNG ou de haute qualité
- Un mélange OKLCH, ou une couleur intermédiaire
- Un grain fin sur toute l’image
Les explications plus poussées se trouvent dans le banding des dégradés et les dégradés boueux. Pour les fonds d’écran, le grain est la solution la plus simple : il casse les paliers pour que l’œil voie un seul mélange continu, et il donne à une couleur numérique plate un air de pellicule.
Fonds d’écran dégradés sombres ou clairs
Les fonds d’écran sombres reposent les yeux la nuit et font ressortir les icônes colorées ; ils bandent aussi plus facilement, donc le grain compte davantage. Les fonds clairs paraissent aérés mais peuvent rendre difficile la lecture du texte blanc des widgets. Si votre téléphone alterne entre apparence claire et sombre, envisagez une paire : les mêmes teintes, une version éclaircie et une version approfondie.
GR·N10S·5T
Cameo Bolero
Voir ce MarkDans Gradiently, vous pouvez créer avec n’importe quel Mark à des tailles personnalisées allant jusqu’à 8 000 pixels sur le grand côté : un même style peut ainsi devenir un fond d’écran d’ordinateur, de portable et de téléphone. Les Marks s’exportent aussi en vidéos en boucle de 5 à 30 secondes si vous voulez un fond d’écran animé.
Les questions qu’on nous pose
Quelle taille pour un fond d’écran dégradé ?
La résolution exacte de votre écran, ou plus grand dans la même forme. Les ordinateurs sont en général en 16:9 ou 16:10 ; les téléphones sont plus hauts, souvent autour du 9:19,5 : vérifiez votre modèle.
Pourquoi mon fond d’écran dégradé a-t-il des rayures ?
C’est du banding : l’écran affiche un mélange lisse en paliers visibles. Exportez en PNG, évitez la forte compression et ajoutez un grain fin pour le masquer.
Comment faire un fond d’écran dégradé arc-en-ciel qui n’ait pas l’air bon marché ?
Utilisez une partie du spectre plutôt que son entier, gardez les couleurs à une luminosité proche, et mélangez en OKLCH pour que les couleurs restent vives entre les arrêts.
Les fonds d’écran sombres sont-ils meilleurs pour un téléphone ?
Ils sont plus agréables à regarder en lumière faible et font ressortir les icônes. Sur les téléphones à écran OLED, un fond sombre peut aussi consommer un peu moins, mais choisissez celui que vous aimez regarder.
É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
