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

Un créateur visuel de dégradés CSS qui vous permet de concevoir des dégradés linéaires, radiaux et coniques avec des points de couleur illimités. Ajustez les angles, positions et couleurs en temps réel et copiez le CSS en un clic.

Choisissez entre des dégradés linéaires, radiaux et coniques, réglez un angle de 0° à 360° et ajoutez autant d'arrêts de couleur que nécessaire, avec une opacité par arrêt pour des superpositions transparentes. Partez d'un préréglage soigné comme Coucher de soleil, Instagram ou Océan, puis affinez les couleurs. Pour les dégradés radiaux, choisissez une forme cercle ou ellipse et un mot-clé d'étendue, et passez le mélange en OKLab ou OKLCH pour une interpolation moderne plus douce, ou appliquez une courbe d'accélération. Activez Animer pour obtenir une boucle @keyframes prête à coller et créer un arrière-plan animé. Le résultat est du CSS pur que vous collez dans une feuille de style, la configuration Tailwind ou votre outil de design.

Comment utiliser

1. Étape 1 — Choisissez le type de dégradé (linéaire, radial ou conique) et définissez la direction ou l'angle à l'aide du curseur ou des boutons prédéfinis.
2. Étape 2 — Ajoutez des points de couleur en cliquant sur la barre de dégradé. Ajustez la couleur et la position de chaque point par glisser-déposer ou en saisissant des valeurs précises.
3. Étape 3 — Prévisualisez le dégradé en direct, puis copiez le code CSS généré dans votre presse-papiers ou téléchargez-le sous forme de fichier CSS.

Quand l'utiliser

• Concevoir hero sections, boutons et fonds de carte sans ouvrir Photoshop.
• Tenir la palette de marque cohérente entre site, e-mail et présentations.
• Tester l'effet CSS avant de transmettre les spécifications au développeur.

Résultat

Supposons que vous vouliez un arrière-plan hero aux tons de coucher de soleil. Choisissez un dégradé linéaire à 135°, placez de l'orange à 0%, du rose à 50% et du violet à 100%, puis copiez le CSS dans votre feuille de styles.

FAQ

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

Le linéaire suit une ligne droite selon l'angle choisi. Le radial part d'un centre vers l'extérieur, comme un soleil. Le conique fait tourner les couleurs autour d'un point, utile pour les camemberts ou les roues chromatiques.

Combien de points de couleur peut-on ajouter ?

Pas de plafond strict. La plupart des designs utilisent deux à quatre points. Au-delà de cinq ou six, le dégradé devient trouble parce que les couleurs se mélangent et perdent les transitions nettes voulues.

Pourquoi vois-je des bandes sur un fond sombre ?

Les bandes apparaissent quand des couleurs voisines ont une luminance proche. Augmentez le contraste entre les arrêts, passez le mélange de couleurs sur OKLCH ou OKLab pour une interpolation perceptuelle, ou ajoutez une fine couche de bruit en CSS.

Peut-on utiliser ces dégradés dans Figma ou Sketch ?

Le code CSS ne se colle pas tel quel, mais les valeurs de couleur et les positions se transposent à l'identique. Copiez le hex et le pourcentage de chaque point dans l'éditeur de dégradés de votre outil.

À quoi sert exactement le paramètre d'angle ?

Pour un dégradé linéaire, 0° pointe vers le haut et l'angle tourne dans le sens horaire : 90° va de gauche à droite, 180° de haut en bas. Pour le conique, l'angle indique où débute le balayage sur le cercle.

Outils similaires