Générateur de gradient CSS
Créez visuellement de magnifiques dégradés CSS : ajustez les couleurs, les arrêts, la direction et copie le code CSS prêt à l’emploi.
Arrêts de couleur
Sortie CSS
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);Pourquoi utiliser le générateur de dégradés PixConvert ?
Générateur de dégradés visuels avec génération CSS instantanée — plus besoin de deviner les valeurs hexadécimales.
Linéaire et radial
Créez des dégradés linéaires avec n'importe quel angle, ou des dégradés radiaux avec une forme et une position configurables.
Arrêts de couleur multiples
Ajoutez jusqu'à 10 points d'arrêt de couleur positionnables. Compatible avec toutes les couleurs CSS, y compris rgba et hsla.
Contrôle d'angle
Faites glisser le curseur d'angle ou saisissez une valeur précise en degrés. Les directions courantes (vers la droite, vers le bas à droite) sont des préréglages.
Aperçu en direct
L'aperçu du dégradé pleine largeur se met à jour en temps réel lorsque vous modifiez une valeur.
CSS prêt à coller
Le résultat est une chaîne de caractères CSS propre pour la propriété fond , prête à être collée dans n'importe quelle feuille de style.
Randomiser
Cliquez sur « Aléatoire » pour une inspiration instantanée : cela génère une magnifique combinaison de dégradés aléatoires.
Cas d'utilisation des dégradés CSS
Les dégradés sont omniprésents dans la conception d'interfaces utilisateur modernes.
Arrière-plans des héros
Créez des dégradés fond riches pour les sections principales de votre page d'accueil.
- Arrière-plans héros pleine page
- gradients de séparation de section
- Superposer des dégradés sur des images
Style des boutons et des cartes
Donnez de la profondeur aux boutons, cartes et badges grâce à des dégradés subtils.
- dégradés du bouton d'action principal
- accents d'en-tête de carte
- La barre de progression se remplit
Conception de marque
Créez des dégradés cohérents avec votre marque et adaptés à votre palette de couleurs.
- dégradés fond du logo
- arrière-plans des icônes d'application
- Ressources des médias sociaux
Comment créer un dégradé CSS
Choisissez le type : linéaire, radial ou conique. Sélectionnez vos couleurs et ajustez les positions des butées. Définissez l’angle ou la direction.
L'aperçu en direct se met à jour instantanément. Cliquez sur Copier le CSS pour copie la valeur CSS fond prête à l'emploi.
Alternez entre les types linéaire et radial et ajustez l'angle ou la forme ; collez ensuite l' fond obtenu dans votre feuille de style.
Explorer plus d'outils
Découvrez d'autres outils gratuits qui fonctionnent parfaitement en complément de celui-ci.
Vérificateur de contraste
Vérifiez les rapports de contraste des couleurs pour la conformité aux WCAG
Générateur d'ombres de boîte
Concevoir des ombres portées CSS avec aperçu en direct
Convertisseur de couleurs
Convertissez instantanément les codes de couleur HEX, RGB et HSL
Extracteur de palette de couleurs
Extraire les couleurs dominantes de n'importe quelle image
Formateur JSON
Formatez, validez et minifiez instantanément le JSON
Testeur d'expressions régulières
Tester et déboguer en direct les expressions régulières
Foire aux questions
Explication des dégradés CSS.
Qu'est-ce qu'un dégradé CSS ?
Un dégradé CSS est une transition douce entre deux ou plusieurs couleurs, définie en CSS pur, sans images. Types : dégradé linéaire (directionnel), dégradé radial (circulaire/elliptique), dégradé conique (rotation autour d’un point central).
Ai-je besoin du préfixe -webkit- ?
Non, pour les navigateurs modernes (Chrome 26+, Firefox 16+, Safari 7+). Le préfixe `-webkit-` n'est nécessaire que pour les navigateurs très anciens. Activez-le dans les options si vous avez besoin de la compatibilité avec IE10 et les versions antérieures de Safari.
Comment créer un dégradé transparent ?
Utilisez les couleurs rgba — par exemple rgba(0, 0, 0, 0) pour la transparence. Pour un fondu vers la transparence, définissez la valeur finale sur rgba(255, 255, 255, 0) pour une transition du blanc vers la transparence ou sur rgba(0, 0, 0, 0) pour une transition du noir vers la transparence.
Puis-je utiliser des variables CSS dans les dégradés ?
Oui, mais cet outil visuel génère des valeurs hexadécimales/RGBA. Pour utiliser les propriétés CSS personnalisées, copie le résultat et remplacez manuellement les valeurs de couleur par vos variables (par exemple, var(--color-primary)).
Quels navigateurs prennent en charge le gradient conique ?
Le dégradé conique est pris en charge par Chrome 69+, Edge 79+, Safari 12.1+ et Firefox 83+. Il n'est pas pris en charge par Internet Explorer. Utilisez `@supports(fond: conic-gradient(red, blue))` pour une amélioration progressive de repli.