Developer Tools
Web Utilities
Image ToolsGénérateur de Dégradés
Créez de beaux dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur. Copiez le code CSS prêt à l'emploi.
Paramètres du Dégradé
Aperçu et Code CSS
.gradient-element {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}linear-gradient(90deg, #667eea 0%, #764ba2 100%)Outils Associés
À Propos du Générateur de Dégradés CSS
Comment Ça Marche
- Choisissez parmi les types de dégradé linéaire, radial ou conique
- Ajoutez plusieurs arrêts de couleur et positionnez-les précisément
- Personnalisez les angles, formes et directions du dégradé
- Prévisualisez les dégradés en temps réel
- Copiez le code CSS prêt à utiliser dans vos projets
- Sélectionnez parmi de beaux dégradés préréglés
Cas d'Utilisation Courants
- Créer des arrière-plans dégradés époustouflants pour les sites web
- Concevoir des arrière-plans accrocheurs pour boutons et cartes
- Construire des éléments d'interface modernes avec des superpositions de dégradés
- Générer des transitions de couleur pour les sections hero
- Expérimenter avec des combinaisons de couleurs pour le branding
- Apprendre la syntaxe et les propriétés des dégradés CSS
Questions Fréquentes
Quels types de dégradés CSS puis-je créer avec cet outil?
L'outil prend en charge les trois types de dégradés CSS: Linéaires (transitions de couleur en ligne droite), Radiaux (transitions circulaires ou elliptiques depuis un point central) et Coniques (transitions tournant autour d'un point central). Chaque type dispose de paramètres personnalisables.
Comment ajouter plusieurs couleurs à mon dégradé?
Cliquez sur le bouton '+ Ajouter un arrêt' pour ajouter des arrêts de couleur. Chaque arrêt peut être personnalisé avec une couleur spécifique (via le sélecteur de couleur ou entrée hex) et une position (0-100%).
Comment contrôler la direction d'un dégradé linéaire?
Pour les dégradés linéaires, utilisez le curseur d'angle pour contrôler la direction de 0 à 360 degrés. 0° crée un dégradé de bas en haut, 90° de gauche à droite, 180° de haut en bas, 270° de droite à gauche.
Quelle est la différence entre les formes cercle et ellipse pour les dégradés radiaux?
Pour les dégradés radiaux, 'cercle' crée un dégradé parfaitement circulaire, tandis qu'ellipse crée un dégradé ovale correspondant aux proportions de l'élément.
Puis-je positionner les dégradés radiaux dans différentes zones?
Oui! Les dégradés radiaux peuvent être positionnés au centre, en haut, en bas, à gauche, à droite ou dans n'importe quel coin. Cela contrôle l'origine du dégradé dans l'élément.
Comment utiliser les dégradés préréglés?
L'outil inclut 20 beaux dégradés préréglés comme Coucher de soleil, Océan, Forêt, Bonbon, Feu, Violet, Aurora et plus. Cliquez simplement sur un bouton préréglé pour l'appliquer instantanément.
Comment copier le code CSS de mon dégradé?
Deux options de copie: 'Copier CSS' fournit la règle CSS complète avec le sélecteur, et 'Copier la valeur' fournit uniquement la valeur du dégradé à utiliser dans n'importe quelle propriété CSS.
Quel est le nombre minimum d'arrêts de couleur requis?
Un dégradé nécessite au moins 2 arrêts de couleur. L'outil impose ce minimum et ne permettra pas de supprimer des arrêts s'il n'en reste que deux.
Puis-je utiliser ces dégradés uniquement pour les arrière-plans?
Bien que les dégradés soient couramment utilisés pour les arrière-plans, ils peuvent être appliqués à background-image, border-image et même mask-image.
Comment fonctionnent les dégradés coniques?
Les dégradés coniques font la transition des couleurs en rotation circulaire autour d'un point central, comme une roue chromatique. Le paramètre d'angle contrôle le point de départ du dégradé.
Les dégradés générés sont-ils compatibles avec tous les navigateurs?
Oui, les dégradés CSS sont bien pris en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari, Edge et les navigateurs mobiles.
Puis-je modifier les arrêts de couleur après les avoir ajoutés?
Absolument! Chaque arrêt de couleur peut être modifié à tout moment. Les modifications se reflètent instantanément dans l'aperçu.