Skip to content
Zoyku

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

Mélangez de deux à cinq couleurs en dégradés CSS linéaires, radiaux ou coniques, avec aperçu en direct, code prêt à coller et palettes harmonisées à un clic.

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Cet outil s'exécute entièrement dans votre navigateur. Vos données ne quittent jamais votre appareil — elles ne sont envoyées à aucun serveur.

Mode d'emploi

  1. 1Réglez de deux à cinq couleurs, ou partez d'une palette prédéfinie.
  2. 2Choisissez le type de dégradé, puis l'angle ou la forme ; épinglez les positions si besoin.
  3. 3Copiez le bloc CSS et collez-le dans votre feuille de styles.

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

Choisissez de deux à cinq couleurs, optez pour linéaire, radial ou conique, et faites glisser l'angle — l'aperçu se met à jour à la frappe et le CSS reste toujours à une copie de distance. Laissez la position d'une couleur vide et elle est placée automatiquement comme le ferait CSS ; fixez des pourcentages exacts pour des coupes nettes et des mélanges décentrés.

La sortie est un vrai bloc de production : une ligne de couleur pleine de secours pour les navigateurs anciens, une ligne préfixée -webkit- pour les anciens moteurs WebKit et la syntaxe standard en dernier. Le bouton d'harmonisation aléatoire fait tourner les teintes de votre palette dans l'espace TSL, pour que chaque mélange reste équilibré.

Questions fréquentes

Pourquoi le CSS contient-il une ligne préfixée -webkit- ?

C'est une ligne de compatibilité pour les anciens moteurs WebKit (époque Safari 5-6 environ) qui ne comprenaient que -webkit-linear-gradient. Tous les navigateurs de la dernière décennie lisent la ligne standard ; vous pouvez donc supprimer la ligne préfixée si vous ne visez pas ces versions — la garder coûte une ligne, la supprimer ne coûte rien.

Que signifie l'angle d'un dégradé linéaire ?

C'est la direction de propagation du dégradé, mesurée dans le sens horaire depuis le haut : 0deg va de bas en haut, 90deg de gauche à droite, 180deg de haut en bas. L'outil normalise tout angle saisi (−45 devient 315) et la convention inverse de l'ancienne syntaxe est déjà gérée dans la ligne -webkit-.

Outils associés

Tous les outils Utilitaires →

Vérificateur de contraste

Calculez le ratio de contraste WCAG entre deux couleurs avec les verdicts AA et AAA pour texte normal et texte grand, ainsi qu'un aperçu en direct. Tout se passe dans votre navigateur.

Tous les outils →

Convertisseur de couleurs

Collez une couleur en hex, rgb() ou hsl() et obtenez les trois formats plus une rangée prête à l'emploi de teintes et nuances pour votre design system.

Tous les outils →

Sélecteur de couleurs

Choisissez une couleur dans l'échantillon ou capturez-en une directement à l'écran avec l'API EyeDropper — hex, RGB et HSL copiés en un clic.

Tous les outils →

Bordure d'image

Ajoutez une bordure unie ou transparente autour d'une image ou de tout un lot — aperçu en direct, sortie PNG ou JPG, tout se passe dans votre navigateur.

Tous les outils →

Intégrer cet outil

Ajoutez cet outil à votre site en une ligne — il s'exécute dans le navigateur du visiteur.

<iframe src="https://zoyku.com/fr/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing