Générateur de fond d'écran en dégradé, gratuit

À propos des dégradés

Les dégradés CSS permettent de créer des transitions de couleurs fluides sans images, ce qui réduit la taille des fichiers et améliore les performances. Cet outil génère à la fois des fichiers PNG à utiliser comme fonds d'écran et du code CSS réutilisable sur un site.

Questions fréquentes

Quelle est la différence entre dégradés linéaire, radial et conique ?

Les dégradés linéaires s'écoulent en ligne droite selon un angle spécifié. Les dégradés radiaux rayonnent depuis un point central. Les dégradés coniques tournent autour d'un point central comme une roue chromatique. Chacun produit un effet visuel différent.

Puis-je utiliser les dégradés CSS sur mon site ?

Oui ! Les dégradés CSS sont pris en charge par tous les navigateurs modernes et ne nécessitent pas d'images. Ils s'adaptent à toutes les tailles, se chargent plus vite et restent nets sur tout écran. Copiez le CSS généré par cet outil dans vos feuilles de style.

Quelles sont les meilleures résolutions selon mon appareil ?

Les moniteurs de bureau utilisent généralement 1920×1080, les portables varient, les écrans 4K utilisent 3840×2160, les iPhone 1080×1920 et les iPad 2048×2732. Choisissez la résolution qui correspond à votre appareil pour un fond d'écran parfaitement net.

Les dégradés sur le web, une brève histoire

Les dégradés ont une longue histoire pré-numérique dans l'impression et l'aérographe. Le vocabulaire du « dégradé » comme rampe douce d'une couleur à une autre provient directement de la chromolithographie et de l'art de l'affiche à l'aérographe de la fin du XIXe siècle ; les étudiants en design du Bauhaus s'exerçaient à des rampes tonales dans les années 1920, bien avant qu'un pixel n'en pousse une à l'écran.

Les dégradés numériques sont apparus en deux moments voisins au début des années 1990. Adobe Photoshop 1.0 (février 1990) est livré avec un outil de dégradé dès le premier jour, un algorithme de « fondu » interpolant entre les nuanciers de premier plan et d'arrière-plan avec une atténuation linéaire et radiale. Adobe PostScript Level 2 (1991) a introduit les motifs d'ombrage comme fonctionnalité de langage de première classe ; jusque-là, PostScript Level 1 n'avait aucun moyen de décrire un dégradé nativement et il fallait le simuler avec des remplissages en bandes de gris incrémentaux. PostScript Level 3 (1997) a ajouté les ombrages en maillage Type 6 (patch de Coons) et Type 7 (produit tensoriel) qui ont propulsé chaque dégradé imprimé dans l'industrie des magazines de la fin des années 1990. L'outil de dégradé en maillage d'Adobe Illustrator a suivi dans la version 8 (1998).

Les dégradés CSS sur le web sont arrivés plus tard qu'on ne le croit. Le -webkit-gradient() de WebKit a été livré dans Safari 4 et Chrome 1 en 2008, avec une syntaxe verbeuse qui lui était propre. Le -moz-linear-gradient() de Mozilla a suivi dans Firefox 3.6 (janvier 2010), avec la syntaxe qui finirait par devenir standard. Les linear-gradient() et radial-gradient() sans préfixe ont atteint le stade de W3C Candidate Recommendation en avril 2012 et étaient largement utilisables à partir de 2013 environ. conic-gradient() est bien plus récent : Chrome 69 en septembre 2018 (derrière un drapeau), sans drapeau dans Chrome 75 (juin 2019), Firefox 83 (novembre 2020). Il est désormais disponible en Baseline sur tous les navigateurs modernes.

Skeuomorphique, puis plat, puis de nouveau le dégradé

Les dégradés sont devenus le langage visuel du design web de la fin des années 1990 et du début des années 2000 : les boutons Web 2.0 vitreux, biseautés et réfléchissants de l'interface Apple Aqua (2000) étaient essentiellement des dégradés imbriqués avec un reflet intérieur net par-dessus un fondu de corps doux. Le mouvement du design plat s'est cristallisé autour de Metro de Microsoft (Windows Phone 7, 2010) et d'iOS 7 d'Apple (2013), réagissant au skeuomorphisme chargé de dégradés en retirant chaque ombre, biseau et fondu de l'interface. Pendant environ cinq ans (2013-2018), les dégradés étaient passés de mode.

Le pendule est revenu fortement à partir de 2017. Le dégradé en maillage multicolore animé de Stripe sur sa page d'accueil a établi un modèle que toute l'industrie SaaS a copié. La refonte du logo d'Instagram en 2016 a remplacé un appareil photo plat par un dégradé rose-orange-violet saturé (un écho délibéré des logos de photographie des années 1980). À la fin de la décennie, les dégradés étaient de nouveau omniprésents, mais avec un nouveau vocabulaire : maillages, taches floutées, fluides en OKLCH, soucieux d'accessibilité. Tailwind CSS 4 (janvier 2025) est livré avec un ensemble soigné d'utilitaires de dégradé par défaut, dont des dégradés coniques avec des indices d'interpolation de teinte.

La syntaxe des dégradés CSS en un écran

Les trois fonctions de dégradé CSS prennent une liste d'arrêts de couleur et une direction :

• linear-gradient(angle, colors…) : l'angle en CSS utilise la convention du relèvement au compas : 0deg pointe vers le haut (première couleur en bas), 90deg pointe à droite, 180deg pointe vers le bas (la valeur par défaut), 270deg pointe à gauche. Notez que c'est l'inverse de l'angle polaire mathématique. Vous pouvez aussi utiliser des mots-clés : to top right calcule l'angle pour que la ligne de dégradé passe par la diagonale, ce qui n'est pas la même chose qu'un dégradé de 135° sur une boîte non carrée.
• radial-gradient(shape size at position, colors…) : les couleurs s'étendent vers l'extérieur depuis un point central. circle ou ellipse ; mots-clés de taille closest-side, farthest-corner ; la position est centrée par défaut.
• conic-gradient(from angle at position, colors…) : les couleurs tournent dans le sens horaire autour d'un centre, comme une roue chromatique. Utile pour les camemberts, les effets de balayage et cet aspect de « graphique en anneau ». Les variantes répétées des trois (repeating-linear-gradient, etc.) répètent les arrêts de couleur à l'infini.

Les arrêts nets (placer deux arrêts de couleur au même pourcentage) créent des bandes franches plutôt que des fondus doux : linear-gradient(red 0%, red 50%, blue 50%, blue 100%) est une division en deux couleurs, pas un dégradé. Utile pour les rayures, les cartes à sections colorées ou les pseudo-bordures.

La révolution OKLCH, et le point médian gris boueux

Un dégradé du rouge pur #ff0000 au vert pur #00ff00 en interpolation sRGB par défaut passe par un jaune-brun désaturé et boueux autour de #7f7f00. Cela se produit parce que l'interpolation linéaire sRGB réduit à la fois les canaux R et G au point médian, et nos yeux perçoivent ce point médian comme bien plus sombre et moins saturé que l'une ou l'autre extrémité. Le point douloureux classique du design web.

Le CSS Color Module Level 4 a ajouté des espaces colorimétriques perceptuellement uniformes et la capacité d'y interpoler des dégradés : linear-gradient(in oklch, red, green). OKLCH (et son cousin OKLab), conçu par Björn Ottosson en décembre 2020, sépare la luminosité, le chroma et la teinte de sorte qu'interpoler le long de l'axe de teinte prend le chemin court autour de la roue chromatique, préservant la saturation tout du long. Le même dégradé rouge-vers-vert en OKLCH passe par un jaune vif au point médian.

La règle générale :

• Deux teintes analogues (rouge vers orange, bleu vers violet) : sRGB et OKLCH se ressemblent ; généralement correct.
• Deux teintes complémentaires (rouge vers vert, bleu vers orange) : sRGB produit du gris boueux, OKLCH produit un balayage de teinte vif. OKLCH l'emporte nettement.
• Une couleur vers le blanc ou le noir : sRGB paraît terne au point médian ; OKLCH maintient une variation douce de la luminosité perçue.
• Deux couleurs désaturées de luminosité similaire : différence minime.

Prise en charge des navigateurs : interpolation-method pour les dégradés a été livré dans Safari 16.2 (décembre 2022), Chrome 111 (mars 2023) et Firefox 113 (mai 2023), désormais Baseline Widely Available.

Préréglages de résolution : choisir le bon nombre de pixels

Un fond d'écran plus petit que l'écran est étiré et paraît flou ; un fond bien plus grand gaspille de la taille de fichier et de la mémoire. Cibles courantes en 2026 :

Résolution	Nom courant	Où
1920×1080	Full HD / 1080p	Le plus courant sur ordinateurs portables et de bureau en 2026
2560×1440	QHD / 2K	Moniteurs grand public de jeu et de création
3440×1440	UWQHD ultralarge	Moniteurs ultralarges incurvés 21:9
3840×2160	4K / UHD	Ordinateurs de bureau haut de gamme et Apple Studio Display
5120×2880	5K	Apple iMac Retina, Studio Display
1080×1920	Téléphone en portrait	Référence Android FHD générique
1170×2532 / 1290×2796	iPhone moderne	Famille iPhone 13-16 en 19,5:9
2048×2732	iPad Pro 12,9 pouces	Tablettes 4:3

Quand recourir à cet outil

• Fonds d'écran d'appareils personnels : bureau, écran de verrouillage, écran d'accueil, même l'arrière-plan du cadran d'une montre connectée.
• Arrière-plans virtuels de visioconférence. Les dégradés unis sont plus faciles pour la segmentation automatique de Zoom/Teams/Meet que les photos chargées : ils réduisent l'artefact de « halo » autour de l'intervenant.
• En-têtes de réseaux sociaux : Twitter/X 1500×500, LinkedIn 1584×396, bannière de chaîne YouTube 2560×1440 (avec des considérations de zone de sécurité), Instagram Stories 1080×1920.
• Dégradés d'identité de marque. Le maillage violet-bleu de Stripe, le rose-orange-violet d'Instagram, le vert citron vers vert foncé de Spotify, le violet-rose de Slack, tous des exemples concrets de dégradés qui définissent une marque.
• Sections héroïques sur les pages web : même si les dégradés CSS sont généralement appliqués directement via background-image, un repli PNG est utile pour les e-mails (la plupart des clients de messagerie ne rendent toujours pas les dégradés CSS de façon fiable) et pour les navigateurs sans interpolation oklch.
• États vides, squelettes de chargement, cartes de tableau de bord : des surfaces d'interface qui gagnent à avoir un léger intérêt visuel sans être distrayantes.
• Impression et produits dérivés. Un fond d'écran 4K à 300 DPI couvre environ une affiche de 12 × 18 pouces.

Accessibilité, le texte sur les dégradés

L'erreur pratique la plus courante avec les arrière-plans en dégradé est d'échouer au contraste pour tout texte superposé. Le CS 1.4.3 des WCAG 2.2 (contraste minimum, niveau AA) exige 4,5:1 pour le texte courant et 3:1 pour le grand texte (18 pt normal ou 14 pt gras). Les WCAG ont été écrites pour des arrière-plans unis ; avec un dégradé, le ratio de contraste en chaque point sous le texte compte : c'est le pire point qui prime.

Solutions pratiques quand vous placez du texte sur un dégradé : ajoutez un voile noir ou blanc semi-transparent sous le texte, limitez le dégradé sous le texte à une plage de luminosité étroite, ou utilisez une forte ombre de texte comme repli. Les dégradés verticaux (sommet sombre, bas clair) sont généralement plus adaptés au texte que les diagonaux : un texte qui s'écoule de gauche à droite rencontre une luminosité d'arrière-plan constante sur chaque ligne ; un dégradé de 45° sous un long bloc de texte force chaque ligne à traverser la plage de luminosité, rendant un contraste cohérent bien plus difficile.

Plus de questions

Pourquoi mon dégradé a-t-il des bandes visibles ?

Deux causes habituelles. Premièrement, la compression JPEG : l'encodage de JPEG fondé sur la DCT produit un « blocking » visible sur les rampes tonales douces, surtout dans les régions à faible saturation. Enregistrez plutôt en PNG ou en WebP sans perte. Deuxièmement, la profondeur de couleur de 8 bits par canal : un dégradé 8 bits entre deux couleurs proches n'a que quelques pas tonals distincts, et l'œil peut parfois les distinguer. Ajouter une subtile superposition de bruit/tramage (1-2 % de bruit) brise les bandes en ajoutant une variation naturelle ; de nombreux outils de design haut de gamme le font automatiquement.

Devrais-je utiliser linéaire, radial ou conique pour un fond d'écran de bureau ?

Pour la plupart des fonds d'écran, un linéaire en légère diagonale (autour de 135°) ou un radial centré hors écran rend le mieux : ils créent une asymétrie sans être distrayants. Les dégradés coniques sont saisissants, mais se lisent comme « conçus par un designer » plutôt que comme un arrière-plan ambiant, donc ils conviennent mieux aux surfaces d'accent (pochettes d'album, publications sur les réseaux sociaux) qu'aux fonds d'écran que vous fixerez huit heures par jour. Les dégradés en maillage (plusieurs dégradés radiaux qui se chevauchent) sont l'aspect le plus moderne, mais nécessitent soit une bibliothèque JS, soit une image générée : un seul dégradé radial avec deux teintes complémentaires à faible saturation est une bonne approximation.

Quelles combinaisons de couleurs rendent le mieux ?

Trois schémas fiables : l'analogue (deux couleurs adjacentes sur la roue, du violet au bleu, de l'orange au rouge) se lit comme calme et harmonieux ; le monochromatique (même teinte, luminosité variable, le bleu Stripe classique) se lit comme caractéristique d'une marque et subtil ; le triadique-plus-OKLCH (trois ou quatre couleurs équidistantes interpolées dans un espace perceptuel) donne l'aspect Stripe / Instagram moderne. Évitez deux couleurs complémentaires pures (rouge/vert, bleu/orange) sauf si vous utilisez explicitement l'interpolation oklch() : sRGB vous donnera un point médian boueux.

Quelque chose est-il envoyé à un serveur ?

Non. Le dégradé est rendu dans un <canvas> de votre navigateur, le PNG est exporté via canvas.toDataURL(), et la chaîne CSS est générée par JavaScript localement. Rien de vos choix de couleurs, dimensions ou de l'image résultante ne quitte la page.

Outils associés