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

Qu'est-ce que Générateur de dégradés CSS ?

Le Générateur de dégradés CSS est un outil gratuit dans le navigateur pour les web designers et développeurs front-end qui veulent construire des dégradés visuellement plutôt que d'écrire la syntaxe à la main. Choisissez linéaire, radial ou conique — avec une variante répétée facultative — puis modifiez les arrêts de couleur sur une barre d'aperçu déplaçable ou dans des lignes par arrêt avec des champs couleur HEX et position. Les dégradés radiaux offrent une forme cercle/ellipse, un mot-clé de taille (closest-side, closest-corner, farthest-side, farthest-corner) et un centre at X% Y%, tandis que les coniques acceptent un angle de départ et un centre. Vous pouvez empiler plusieurs couches de dégradé dans un seul fond séparées par des virgules, générer un dégradé aléatoire, appliquer des palettes prédéfinies, faire pivoter la teinte de chaque arrêt et copier la règle background prête à coller.

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

1. Choisissez le type de dégradé — Linéaire, Radial ou Conique — et activez Répété dans les options pour un motif répété.
2. Glissez les arrêts le long de la barre d'aperçu pour les repositionner, cliquez sur un endroit vide de la barre pour ajouter un arrêt, ou double-cliquez sur un arrêt pour le supprimer.
3. Affinez chaque arrêt avec ses champs couleur HEX et position, ou utilisez la pipette (si prise en charge) pour prélever une couleur à l'écran.
4. Pour les dégradés radiaux, définissez la forme (cercle ou ellipse), un mot-clé de taille et le centre X/Y ; pour les coniques, l'angle de départ et le centre.
5. Ajoutez des couches pour empiler des dégradés dans un seul fond, essayez Aléatoire, appliquez une palette ou faites pivoter toutes les teintes d'un coup.
6. Copiez la règle CSS background générée et collez-la dans votre feuille de style.

Exemples

Linéaire, 90deg, #4f86f7 à 0% et #9333ea à 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Couche 1 linéaire 90deg ; Couche 2 radiale circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Questions fréquentes

Quels types de dégradé et options sont pris en charge ?

Les dégradés linéaires, radiaux et coniques, chacun avec une variante répétée facultative. Le radial ajoute une forme cercle/ellipse, un mot-clé de taille (closest-side, closest-corner, farthest-side, farthest-corner) et un centre at X% Y% ; le conique ajoute un angle de départ et un centre. Vous pouvez aussi empiler plusieurs couches dans un seul fond.

Comment fonctionne la barre d'arrêts déplaçable ?

Glissez un arrêt le long de la barre pour changer sa position, cliquez sur une partie vide de la barre pour insérer un nouvel arrêt avec une couleur interpolée, et double-cliquez sur un arrêt pour le supprimer (un minimum de deux est conservé). Chaque arrêt possède aussi des champs couleur HEX et position sous la barre.

Puis-je prélever une couleur à l'écran ?

Oui, dans les navigateurs prenant en charge l'API EyeDropper. Lorsqu'elle est disponible, un bouton pipette apparaît à côté de chaque arrêt ; cliquez et choisissez n'importe quel pixel à l'écran. Vous pouvez toujours saisir une valeur HEX ou utiliser la pastille de couleur native.

Que font Aléatoire, les palettes et pivoter la teinte ?

Aléatoire remplace la couche active par un nouveau dégradé aléatoire, les palettes remplacent les arrêts de la couche active par un jeu de couleurs choisi, et Pivoter la teinte décale la teinte de chaque arrêt de chaque couche d'un coup. Ils ne changent le dégradé que lorsque vous cliquez.

Mes couleurs ou mon CSS sont-ils envoyés quelque part ?

Non. Le dégradé est entièrement construit dans votre navigateur avec des calculs locaux de chaînes et de couleurs — aucune couleur, aucun CSS ni aucun réglage n'est jamais envoyé à un serveur, il fonctionne donc hors ligne et garde votre travail privé.