Concevez de superbes dégradés et exportez-les sous forme de CSS ou d'images
Choisissez des couleurs, ajoutez des arrêts et ajustez l'angle ou le point central pour créer le dégradé exact dont vous avez besoin. L'outil prend en charge les dégradés linéaires, radiaux et coniques avec des arrêts de couleur illimités. Copiez le code CSS de votre feuille de style ou téléchargez le dégradé au format PNG haute résolution pour l'utiliser dans des projets de conception.
Utilisez cet outil gratuitementBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
Comment utiliser
Choisissez le type de dégradé
Sélectionnez linéaire, radial ou conique. Pour linéaire, définissez l'angle ; pour radial, définissez le point central et la forme.
Ajouter et ajuster les couleurs
Cliquez sur la barre de dégradé pour ajouter des arrêts de couleur. Faites glisser pour repositionner, double-cliquez pour changer la couleur et ajustez l'opacité pour chaque arrêt.
Copiez CSS ou téléchargez
Copiez le code CSS généré pour une utilisation sur le Web ou définissez une résolution et téléchargez le dégradé sous forme d'image PNG.
Caractéristiques
Trois types de dégradés
Créez des dégradés linéaires avec n'importe quel angle, des dégradés radiaux avec un centre et une forme réglables ou des dégradés coniques qui balayent autour d'un point. Basculez entre les types et les mises à jour d’aperçu instantanément.
Arrêts de couleur illimités
Ajoutez autant d’arrêts de couleur que nécessaire le long de la barre de dégradé. Faites glisser les arrêts pour les repositionner, double-cliquez pour changer la couleur ou cliquez avec le bouton droit pour les supprimer. Chaque arrêt prend en charge l'opacité pour les dégradés semi-transparents.
Sortie du code CSS
L'outil génère un code d'image d'arrière-plan CSS valide avec les préfixes du fournisseur. Copiez le code et collez-le directement dans votre feuille de style. La sortie est mise à jour en temps réel à mesure que vous modifiez le dégradé.
Exportation d'images PNG
Téléchargez le dégradé au format PNG dans n'importe quelle résolution - des vignettes de 100 px aux bannières de 4 000 px. Utilisez l'image comme arrière-plan, superposition ou élément de conception dans des outils qui ne prennent pas en charge les dégradés CSS.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceCaractéristiques
| Types de dégradés | Linéaire, radial, conique |
| La couleur s'arrête | Illimité |
| Plage d'angles | 0–360° |
| Sortie CSS | Préfixes standard + fournisseur |
| Exportation PNG | Jusqu'à 4 000 × 4 000 px |
| Traitement | Côté client (instantané) |
Related Magic Eraser Tools
Questions courantes
Puis-je créer un dégradé avec transparence ?
+
Oui. Chaque arrêt de couleur possède un curseur d'opacité. Réglez l'opacité en dessous de 100 % pour créer des zones semi-transparentes dans le dégradé. La sortie CSS utilise les valeurs rgba et l'export PNG préserve le canal alpha.
Qu'est-ce qu'un dégradé conique ?
+
Un dégradé conique rayonne des arrêts de couleur autour d’un point central, comme le mouvement d’une aiguille d’horloge. Il est utile pour les effets de style camembert, les roues chromatiques et les arrière-plans décoratifs. La prise en charge du navigateur est excellente dans les navigateurs modernes.
Puis-je utiliser le CSS généré dans n’importe quel framework ?
+
Oui. Le résultat est un CSS standard qui fonctionne en HTML simple, React, Vue, Tailwind et tout autre framework prenant en charge le CSS en ligne ou basé sur une feuille de style.
Besoin d'un dégradé sur une photo ?
AI Enhance peut ajuster la tonalité de couleur et l'éclairage de vos photos, et notre outil de superposition d'images vous permet de mélanger un dégradé sur n'importe quelle image pour un look soigné.
Essayez-le gratuitementMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Convertissez les couleurs entre les formats nommés HEX, RVB, HSL, HSB, CMJN et CSS. Affichez un aperçu en direct, copiez n'importe quelle valeur et exportez une carte de couleurs.
Convertissez les codes de couleur HEX en valeurs RVB et vice versa. Aperçu en direct, copie en un clic et sortie d'extrait de code CSS. – fonctionne dans votre navigateur.
Choisissez n'importe quelle couleur dans une image téléchargée et obtenez instantanément ses codes HEX, RVB et HSL. Créez des palettes à partir de photos pour la conception Web, la stratégie de marque et l'illustration.
Téléchargez une photo et extrayez 5 à 10 couleurs dominantes avec les codes HEX, RVB et HSL. Copiez des échantillons, exportez-les sous forme de variables ASE ou CSS.
Générez des codes QR pour les URL, le texte, les informations d'identification WiFi et les vCards. Personnalisez les couleurs, ajoutez un logo central et téléchargez au format PNG ou SVG.
Calculez la largeur, la hauteur ou le rapport hauteur/largeur des images et des vidéos. Entrez deux valeurs et obtenez la troisième. Ratios prédéfinis pour les médias sociaux, les films et l'impression.