Génère du CSS linear-gradient() et radial-gradient(). Pour linéaire : réglez l'angle (0-360°) ou la direction (to right, to bottom, etc.). Pour radial : réglez la forme (cercle/ellipse) et la position. Ajoutez autant de stops de couleur que vous voulez—chaque stop a une couleur et une position en pourcentage. L'aperçu en direct se met à jour pendant que vous ajustez. Gère les préfixes vendeurs si vous avez besoin du support IE (bien qui utilise IE encore?).
Générateur de Dégradé
Créez de beaux dégradés CSS visuellement. Prise en charge des dégradés linéaires et radiaux avec plusieurs couleurs. Générateur de dégradé en ligne gratuit.
Paramètres
%
%
Préréglages
Code CSS
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Questions fréquentes
Trouvez rapidement vos réponses
Quels types de dégradés puis-je créer?
Vous pouvez créer des dégradés linéaires (avec angle et direction personnalisables) et des dégradés radiaux (avec position et forme personnalisables). Tous les dégradés prennent en charge plusieurs arrêts de couleur.
Combien de couleurs puis-je ajouter à un dégradé?
Vous pouvez ajouter autant d'arrêts de couleur que nécessaire. Chaque arrêt de couleur a une position (0-100%) et une valeur de couleur. L'outil générera le CSS correct pour les dégradés multicolores complexes.
Puis-je prévisualiser le dégradé sur différents arrière-plans?
Oui ! L'outil affiche votre dégradé sur un arrière-plan de damier transparent, vous pouvez donc voir à quoi il ressemble avec la transparence. Vous pouvez également le prévisualiser sur des arrière-plans unis clairs ou sombres.
L'outil génère-t-il du code CSS?
Oui ! L'outil génère du CSS standard qui fonctionne dans tous les navigateurs modernes. Vous pouvez copier le CSS en un clic et le coller directement dans votre feuille de style.
Mes données de conception sont-elles privées?
Absolument. Toute la génération de dégradés se produit localement dans votre navigateur. Vos conceptions ne sont jamais envoyées à un serveur.
Voir le guide complet
Découvrez des astuces avancées
Cas d'usage
Découvrez comment utiliser cet outil
Design de Fond
Créer des arrière-plans dégradés accrocheurs.
- En-têtes de page d'atterrissage
- Sections héro
- Arrière-plans de boutons
- Superpositions de cartes
Couleurs de Marque
Concevoir des transitions de couleur fluides pour la marque.
- Dégradés de logo
- Actifs de médias sociaux
- Bannières marketing
- Diapositives de présentation
UI Moderne
Appliquer les tendances de dégradés populaires aux interfaces.
- Effets de glass morphisme
- Dégradés d'aurore
- Dégradés de maillage
- Remplissages de dégradé de texte
À propos de cet outil
Les dégradés CSS sont puissants mais la syntaxe est pénible—se rappeler s'il faut utiliser <code>linear-gradient(90deg)</code> ou <code>linear-gradient(to right)</code> (les deux marchent, mais la cohérence compte). Cet outil vous donne un éditeur visuel—choisissez les couleurs, ajustez les stops, réglez l'angle, obtenez le CSS. Supporte les dégradés linéaires et radiaux, plus plusieurs stops de couleur pour des effets complexes.
Détails techniques
Engagement de confidentialité
🔒 **Priorité à la vie privée** : Contrairement aux outils basés sur des serveurs, AI-TOL traite tout localement dans votre navigateur - vos données ne quittent jamais votre appareil. Pas de téléchargement, pas de suivi, totalement privé.