BrowserTools
Publicité
Accueil / Générateurs / Générateur de dégradés CSS

Générateur de dégradés CSS

Créez des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct et un code prêt à copier.

Maintenu par BrowserTools

Chargement de Générateur de dégradés CSS… Si rien ne se passe, activez JavaScript.

Un dégradé CSS est une fonction qui génère une transition douce entre deux couleurs ou plus, rendue entièrement par le navigateur sans aucun fichier image. Il existe trois types : `linear-gradient()` fait transitionner les couleurs le long d'un axe droit à n'importe quel angle ; `radial-gradient()` rayonne vers l'extérieur depuis un point central en cercle ou en ellipse ; et `conic-gradient()` balaie les couleurs autour d'un point central comme le cadran d'une horloge. Les trois sont indépendants de la résolution, ils s'affichent nets à n'importe quelle densité d'écran, des écrans HD standard aux écrans Retina haute densité, et comme ils sont calculés sur le GPU, ils n'entraînent pratiquement aucun coût de performance par rapport aux arrière-plans en image.

Questions fréquentes

Quelque chose est-il envoyé à un serveur lorsque je crée un dégradé ?
Non. Le dégradé est calculé et prévisualisé entièrement dans votre navigateur grâce au rendu CSS. L'outil ne contient aucun backend, aucune télémétrie et aucune requête réseau. Vos choix de couleur n'existent que dans l'onglet de navigateur actuel jusqu'à ce que vous copiiez le CSS.
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Un dégradé linéaire fait transitionner les couleurs le long d'une ligne droite selon un angle précisé, 0deg correspond à de bas en haut, 90deg à de gauche à droite. Un dégradé radial rayonne depuis un point central vers l'extérieur en cercle ou en ellipse. Un dégradé conique balaie les couleurs autour d'un point central par angle, comme les segments d'un diagramme circulaire ou le cadran d'une roue chromatique.
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
Les dégradés linéaires et radiaux sont pris en charge sans préfixe propriétaire depuis Chrome 26, Firefox 16, Safari 7 et Edge (toutes versions). Les dégradés coniques sont arrivés plus tard, Chrome 69, Safari 12.1 et Firefox 83, mais toutes les versions actuelles des navigateurs prennent en charge les trois types. Aucun préfixe propriétaire n'est nécessaire pour un navigateur moderne.
Comment créer un dégradé avec une bordure nette plutôt qu'un fondu doux ?
Placez deux arrêts de couleur à la même position. Par exemple, `linear-gradient(red 50%, blue 50%)` crée une séparation nette, le rouge remplissant exactement la moitié supérieure et le bleu la moitié inférieure. Vous pouvez combiner des arrêts nets et doux dans le même dégradé pour créer des effets de rayures ou de bandes.
Puis-je utiliser des dégradés comme bordure ou remplissage de texte ?
Vous ne pouvez pas appliquer un dégradé directement à la propriété `border-color`, mais vous pouvez obtenir une bordure en dégradé en utilisant la propriété `border-image` avec une valeur de dégradé, ou en utilisant une technique de pseudo-élément. Pour du texte en dégradé, appliquez le dégradé comme `background`, puis utilisez `background-clip: text` et `color: transparent`, une technique largement prise en charge dans les navigateurs modernes.
Qu'est-ce qu'un arrêt de couleur et combien puis-je en ajouter ?
Un arrêt de couleur définit la couleur à une position précise au sein du dégradé, exprimée en pourcentage ou en longueur. Les navigateurs interpolent en douceur entre les arrêts adjacents. Vous pouvez ajouter autant d'arrêts que vous le souhaitez, CSS ne définit pas de maximum, bien qu'un très grand nombre d'arrêts puisse affecter les performances de rendu du dégradé sur les appareils d'entrée de gamme.
Comment contrôler le point milieu entre deux arrêts de couleur ?
Les dégradés CSS prennent en charge une indication de couleur (aussi appelée indication de point milieu) entre deux arrêts, écrite sous la forme d'un pourcentage isolé : `linear-gradient(red, 30%, blue)` déplace le point milieu de la transition au repère des 30% plutôt qu'aux 50% par défaut. Cela offre un contrôle plus fin sur la vitesse à laquelle les couleurs se fondent, utile pour créer des effets de lumière d'apparence naturelle.
Puis-je superposer plusieurs dégradés les uns sur les autres ?
Oui. La propriété `background` accepte plusieurs valeurs séparées par des virgules, et chacune peut être un dégradé. Elles s'empilent de haut en bas, donc `background: linear-gradient(...), radial-gradient(...)` dessine le dégradé linéaire au-dessus du radial. Vous pouvez combiner des dégradés avec des URL d'images de la même manière, créant des arrière-plans composites sans aucun logiciel d'édition d'image.
Quelle était l'ancienne façon de faire des dégradés avant CSS3 ?
Avant la normalisation des dégradés CSS, les concepteurs web créaient des effets de dégradé à l'aide d'images découpées, un GIF ou PNG d'un pixel de haut étiré pour remplir la largeur de l'élément. Cette approche nécessitait un logiciel de design, produisait des requêtes HTTP supplémentaires, paraissait floue sur les écrans haute densité et était pénible à mettre à jour lorsque les couleurs de la marque changeaient. Les dégradés CSS, normalisés dans le cadre de CSS Images Level 3, ont éliminé tous ces inconvénients.
Comment créer un dégradé qui fonctionne comme un indicateur de chargement ?
Un dégradé conique combiné à `animation: spin 1s linear infinite` et `border-radius: 50%` en CSS est l'approche moderne tout en CSS pour les indicateurs de progression. Définissez le dégradé de votre couleur d'accentuation vers transparent, en commençant à 0deg. La rotation crée l'impression d'un arc qui se poursuit. Cette technique remplace les GIF animés et évite le recours au JavaScript pour un motif d'interface courant.

À propos de Générateur de dégradés CSS

Les dégradés CSS sont utilisés partout dans le design web moderne. Les dégradés linéaires subtils ajoutent de la profondeur aux sections principales, aux états de bouton et aux arrière-plans de cartes sans la surcharge des ressources image. Les dégradés radiaux créent des effets de projecteur, des vignettes et une lueur ambiante autour des éléments centraux. Les dégradés coniques sous-tendent les diagrammes circulaires, les indicateurs de chargement et les roues chromatiques construits uniquement en CSS. Au-delà de l'esthétique, les dégradés en CSS sont versionnés dans le code source à côté du balisage qu'ils stylisent, ce qui les rend plus faciles à maintenir, à mettre à jour et à transmettre que les fichiers image générés dans un logiciel de design.

Cet outil propose un éditeur visuel en direct pour les trois types de dégradé. Vous ajoutez, supprimez et repositionnez des arrêts de couleur sur une piste interactive, vous ajustez l'angle ou la forme, et la sortie CSS se met à jour en temps réel. L'extrait généré est du CSS3 standard, sans préfixe propriétaire, qui fonctionne dans tous les navigateurs modernes. Il s'exécute entièrement côté client, sans téléversement, sans compte, sans suivi. Les modifications n'existent que dans votre session de navigateur et dans le CSS final que vous copiez dans le presse-papiers.

Une considération importante est l'accessibilité : les dégradés sont des arrière-plans décoratifs et ne portent pas d'alternatives textuelles, mais ils affectent le rapport de contraste de tout texte affiché par-dessus. Un dégradé qui commence clair et se termine foncé peut rendre le texte lisible d'un côté de l'élément et illisible de l'autre. Testez toujours vos arrière-plans en dégradé par rapport à votre texte de premier plan à l'aide d'un vérificateur de contraste. Une technique pratique consiste à ajouter une superposition sombre semi-transparente via une couche CSS supplémentaire, `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))`, afin de garantir un contraste minimum constant sur toute la zone du dégradé.

Des barres arc-en-ciel criardes des années 1990 au CSS accéléré par GPU : la chronologie du dégradé web

Les concepteurs web ont d'abord obtenu des dégradés à la fin des années 1990 grâce à des découpes d'images GIF et PNG, une tuile d'image d'un pixel de large étirée horizontalement, ou un arrière-plan d'image en pleine largeur. La technique était si répandue qu'elle a façonné toute une esthétique : la barre de navigation au dégradé bleu foncé vers noir est devenue synonyme du design web d'entreprise du début des années 2000. Créer ou ajuster ces dégradés nécessitait Photoshop, un nouvel export et un déploiement serveur, un flux de travail qui pouvait prendre des heures pour un changement de couleur susceptible d'être rejeté lors de la revue.

La syntaxe de dégradé CSS avec préfixes propriétaires a commencé à apparaître vers 2008 : `-webkit-gradient()` dans Safari, avec sa propre syntaxe particulière qui ne ressemblait guère à ce qui allait devenir le standard. Firefox a introduit `-moz-linear-gradient()` avec une syntaxe différente. Internet Explorer n'offrait aucune prise en charge des dégradés jusqu'à IE10, poussant les développeurs à utiliser à la place la syntaxe propriétaire `filter: progid:DXImageTransform.Microsoft.gradient()`. Pendant plusieurs années, obtenir des dégradés cohérents entre navigateurs nécessitait d'écrire quatre déclarations distinctes pour le même effet, un cauchemar de maintenance qui a rendu énormément populaires les préprocesseurs CSS et les outils de génération de dégradés.

Le W3C a normalisé les dégradés CSS dans la spécification CSS Images Level 3, les dégradés linéaires et radiaux gagnant une prise en charge universelle sans préfixe vers 2013. Les dégradés coniques, proposés par Lea Verou dans un billet de blog en 2015, ont été implémentés dans les navigateurs entre 2018 et 2020 après qu'elle eut publié un polyfill démontrant les cas d'usage. La progression des tuiles d'image bricolées vers les primitives CSS natives rendues par GPU suit l'histoire plus large de la maturation de la plateforme web, passant d'un système de documents à un véritable environnement d'exécution d'applications.

Outils associés

Convertisseur de couleurs et vérificateur de contraste

Convertissez les couleurs entre HEX, RGB, HSL et HSV, avec un vérificateur de ratio de contraste WCAG.

Générateur de palettes de couleurs

Générez des palettes complémentaires, analogues, triadiques, tétradiques, monochromatiques et de nuances/teintes à partir de n'importe quelle couleur de base.
Publicité
Publicité
Publicité