Générateur de Dégradés CSS
Créez des dégradés CSS linéaires, radiaux et coniques visuellement. Ajoutez des arrêts de couleur, ajustez les angles, puis copiez le CSS prêt à l'emploi.
Type de dégradé
background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%);
Dégradés prédéfinis
Comment utiliser cet outil
- Choisissez un type de dégradé — Linéaire, Radial ou Conique — en utilisant les boutons en haut de l'éditeur.
- Ajustez l'angle (pour les dégradés linéaires et coniques) ou la position centrale (pour les radiaux) pour contrôler la direction.
- Modifiez les arrêts de couleur : cliquez sur un échantillon pour ouvrir le sélecteur, faites glisser le curseur de position et ajustez l'opacité.
- Cliquez sur '+ Ajouter un arrêt' pour insérer plus de couleurs, ou sur l'icône de corbeille pour supprimer un arrêt.
- Cliquez sur 'Copier CSS' pour copier le code, 'Télécharger PNG' pour enregistrer le dégradé comme image, ou 'Partager URL' pour obtenir un lien partageable.
Pourquoi utiliser notre Générateur de Dégradés CSS ?
Créer des dégradés CSS à la main signifie mémoriser la syntaxe et deviner les valeurs d'angle. Notre éditeur visuel se met à jour en temps réel pendant que vous déplacez les arrêts et choisissez les couleurs. La sortie inclut toujours les règles standard et préfixées -webkit- pour que votre dégradé fonctionne dans tous les navigateurs modernes.
Questions fréquemment posées
Comment ajouter de la transparence à un dégradé CSS ?
Utilisez le curseur d'opacité à côté de chaque arrêt de couleur. L'outil génère des valeurs rgba(), de sorte que chaque arrêt peut avoir son propre niveau de transparence. Un arrêt à 0% d'opacité devient complètement transparent.
Qu'est-ce qu'un dégradé conique ?
Un dégradé conique fait tourner les couleurs autour d'un point central — comme une roue chromatique — plutôt que le long d'une ligne droite (linéaire) ou vers l'extérieur depuis un centre (radial). Il est couramment utilisé pour les graphiques circulaires et les animations de chargement.
Comment utiliser un dégradé comme fond CSS ?
Copiez le CSS généré et collez-le dans votre feuille de style. Par exemple : .element { background: linear-gradient(135deg, #6366f1, #ec4899); }.
Quelle est la différence entre les dégradés linéaires et radiaux ?
Un dégradé linéaire fait la transition entre les couleurs le long d'une ligne droite à un angle donné. Un dégradé radial rayonne vers l'extérieur depuis un point central de manière circulaire ou elliptique.
Cet outil génère-t-il du CSS compatible avec les navigateurs ?
Oui. La sortie inclut toujours la version préfixée -webkit- à côté de la propriété CSS standard, assurant la compatibilité avec Safari et les navigateurs basés sur Chromium plus anciens.
Outils associés
Générateur de Tableaux Markdown
Créez des tableaux Markdown visuellement ou collez depuis Excel, Google Sheets ou CSV. Réglez l alignement et exportez du GFM.
Générateur UUID
Générez des UUID aléatoires pour des applications, bases de données et API.
Analyseur de balises meta SEO
Analysez les title tags, meta descriptions, balises Open Graph, Twitter Cards et aperçus sociaux de n'importe quelle URL publique.
Aperçu de Snippet SERP
Prévisualisez le rendu de votre title tag et meta description dans Google, avec des limites de largeur en pixels en direct.
Outils consultés récemment
Regex Tester
DeveloperTest and debug regular expressions with real-time match highlighting, group capture, and substitution.
Social Media Image Resizer
ImageResize and crop images to the exact size for Instagram, YouTube, X, Facebook, LinkedIn, TikTok, and Pinterest with one-click presets.
SEO Meta Analyzer
DeveloperAnalyze title tags, meta descriptions, Open Graph tags, Twitter Cards, and social previews from any public URL.