Développeur / CSS
Générateur de dégradés CSS
Créez un dégradé linéaire, radial ou conique avec aperçu en direct, autant de points de couleur que nécessaire et des préréglages, puis copiez le CSS.
Générateur de dégradés CSS: Le générateur écrit la déclaration background dont le navigateur a besoin pour afficher le dégradé : linear-gradient avec un angle, radial-gradient avec un cercle ou une ellipse partant du centre, ou conic-gradient faisant le tour du centre à partir d’un angle de départ, avec les points de couleur dans l’ordre. Une couleur unie est placée en premier comme solution de repli pour les navigateurs trop anciens pour afficher les dégradés. Une nouvelle couleur est ajoutée dans l’intervalle le plus large et mélangée à partir de ses voisines, afin d’éviter une rupture dans le dégradé. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
La première ligne est une couleur unie pour les navigateurs très anciens ; tous les navigateurs actuels utilisent le dégradé de la deuxième ligne.
Préréglages
Des dégradés fluides
Un mélange entre deux teintes très différentes, comme le bleu et le jaune, passe par un gris terne au milieu. Ajouter une étape intermédiaire d’une couleur plus vive permet de conserver son dynamisme. Les dégradés entre des teintes voisines, comme l’orange et le rose, nécessitent rarement une correction.
Choisissez ou vérifiez vos couleurs avec le convertisseur de couleurs, et ajoutez de la profondeur à une carte avec le générateur d’ombres portées.
Du texte sur un dégradé
Vérifiez que le texte reste lisible aux deux extrémités du dégradé, et pas seulement au milieu. Un dégradé plus sombre avec du texte blanc, ou un dégradé discret derrière du texte sombre, est plus sûr qu’un arc-en-ciel éclatant.
Comment l'utiliser
- Choisissez un préréglage ou un dégradé linéaire, radial ou conique.
- Définissez l’angle, ajustez les couleurs et leur position, puis ajoutez une couleur pour créer d’autres points.
- Copiez le CSS dans votre feuille de style.
Confidentialité et limitations
Tout s’exécute dans votre navigateur ; votre dernier dégradé est conservé uniquement dans ce navigateur.
Outils associés
Questions fréquentes
Que signifie l’angle dans un dégradé linéaire ?
0deg va du bas vers le haut, 90deg de gauche à droite, 180deg du haut vers le bas et 270deg de droite à gauche. Le dégradé est tracé dans cette direction : 135deg va donc du coin supérieur gauche au coin inférieur droit.
Qu’est-ce qu’un point de couleur ?
Il s’agit d’une couleur et de la position, de 0% à 100% le long du dégradé, où elle est atteinte exactement. Entre deux points, les couleurs se mélangent ; placer deux points à la même position crée une bordure nette au lieu d’un mélange, ce qui permet de créer des bandes.
Quelle est la différence entre un dégradé conique et un dégradé radial ?
Un dégradé radial change de couleur vers l’extérieur à partir du centre, en formant des anneaux. Un dégradé conique change de couleur autour du centre, comme les aiguilles d’une horloge ; il est utile pour les roues chromatiques et les diagrammes circulaires.
Ai-je encore besoin des préfixes -webkit- ?
Non. Tous les navigateurs actuels prennent en charge linear-gradient et radial-gradient sans préfixe, et conic-gradient fonctionne dans tous ces navigateurs depuis 2021. La couleur de repli sur la première ligne ne sert qu’aux navigateurs beaucoup plus anciens.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis