Générateur de Dégradé CSS
Générateur de dégradé CSS gratuit : créez des dégradés linéaires, radiaux, coniques et mesh avec aperçu en temps réel. Mode oklch, export Tailwind et 50+...
Mis à jour mai 2026
Vérifié par Rafael Duarte
⚙ Configuration
Type de dégradé
Angle
Interpolation des couleurs
background: linear-gradient(135deg, #197FE6 0%, #0EA5E9 100%);
Organize seus animes,
séries e filmes
em um só lugar.
Chega de três apps diferentes. Media tracker 100% em português, com alertas automáticos, feed social e salas de discussão.
+2.400 já na fila de espera
Comment utiliser le générateur de dégradé CSS
Quatre types, interpolation perceptuelle en option
1. Choisissez le type de dégradé
Linéaire, Radial, Conique ou Mesh.
2. Modifiez les points de couleur
Glissez les poignées sur la barre, ajustez l'angle avec la roue visuelle ou saisissez des degrés.
3. Copiez le snippet
Naviguez entre CSS, oklch, Tailwind v3 et Tailwind v4, puis copiez.
Ce que fait cet outil
Les quatre types, y compris le mesh synthétisé
Mode oklch
Interpolation perceptuellement uniforme — élimine la "zone morte" grisâtre entre couleurs complémentaires.
Dégradé mesh
Synthétisé par superposition de radial-gradient() pour l'effet "aurore" du design SaaS moderne.
10 presets prêts à l'emploi
Partez d'une combinaison comme Ocean, Aurora ou Rainbow plutôt que d'ajuster des points de couleur à partir de zéro.
Export Tailwind v3 et v4
Une fonctionnalité absente de la plupart des concurrents, y compris cssgradient.io.
Aperçu en contexte de landing page
Visualisez le dégradé appliqué dans une maquette complète de section hero — navbar, badge, CTA et preuve sociale — avant de copier le CSS.
Presets personnels et export PNG
Enregistrez jusqu'à 20 combinaisons dans le navigateur en un clic, ou exportez le dégradé actuel en image PNG prête pour vos miniatures.
Les quatre types de dégradé
Quand vous allez utiliser cet outil
Les scénarios les plus courants chez les utilisateurs
Fonds de section hero
Les dégradés mesh ou linéaires créent de la profondeur sans images, améliorant les Core Web Vitals.
États hover de boutons
Un dégradé linéaire subtil apporte de la richesse visuelle tout en gardant un background-color uni comme fallback.
Overlays glassmorphism
Les dégradés radiaux avec des points d'opacité produisent un effet de verre dépoli.
Texte avec dégradé
Découper un linear-gradient sur du texte avec background-clip:text crée des titres percutants.
Bibliothèque de dégradés de marque
Enregistrez les combinaisons de couleurs de votre marque comme presets personnels dans le navigateur pour les réutiliser d'un projet à l'autre sans ressaisir les codes hex.
Brainstorm visuel rapide
Utilisez le bouton aléatoire pour générer des combinaisons inédites de couleurs et d'angle quand l'inspiration manque pour partir de zéro.
Erreurs courantes
Dégradé terne entre couleurs complémentaires
sRGB crée une "zone morte" grisâtre entre le bleu et le jaune — activez le mode oklch pour l'éviter.
Croire qu'il existe une fonction mesh-gradient() native
Aucune fonction CSS native n'existe — le mesh est synthétisé par superposition de plusieurs radial-gradient().
Oublier -webkit-background-clip pour le texte
Nécessaire en complément de background-clip:text pour la compatibilité Safari.
Perdre des points de couleur supplémentaires à l'export Tailwind v3
Le format from/via/to de Tailwind v3 ne supporte que trois points — avec 4 points de couleur ou plus, les points intermédiaires au-delà du premier sont supprimés du snippet. Utilisez Tailwind v4 ou le CSS pur pour tous les conserver.
Croire qu'on peut exporter radial, conique ou mesh vers Tailwind
L'export Tailwind v3/v4 n'existe que pour les dégradés linéaires — les trois autres types génèrent uniquement des snippets de CSS pur.
S'attendre à ce que les presets enregistrés se synchronisent entre appareils
Les presets restent uniquement dans le localStorage du navigateur actuel — changer de navigateur, utiliser une fenêtre privée ou effacer les données du site les efface.
Pourquoi utiliser cet outil
Prend en charge l'interpolation de couleur perceptuelle via oklch et l'export Tailwind v3/v4 — des fonctionnalités absentes de la plupart des outils concurrents, y compris cssgradient.io.
Le générateur de dégradé mesh synthétise l'effet "aurore" popularisé par le design SaaS, sans avoir à superposer manuellement des radial-gradients.
Au-delà de la génération du CSS, vous pouvez enregistrer des presets personnels dans le navigateur, exporter le résultat en PNG et visualiser le tout dans une maquette complète de landing page avant de vous décider — sans quitter l'outil.
sRGB vs. oklch
Pourquoi l'interpolation de couleur compte
Questions fréquentes
Un outil qui crée du code CSS de dégradé prêt à coller dans votre feuille de style — vous choisissez les couleurs, le type et les options, et vous obtenez du CSS valide.
Ressources
Référence définitive pour tous les types de dégradés CSS.
La spécification qui a introduit oklch et l'interpolation de couleur perceptuelle.
Tableau de compatibilité entre navigateurs pour les dégradés coniques, utile pour confirmer le support avant une mise en production.
Outils connexes
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
