Ajoutez votre entrée
Deux couleurs, un type de dégradé et, pour le mode linéaire, un angle.
Atelier de design
Générateur de dégradés CSS
Ajustez le résultat et copiez un CSS prêt à utiliser.
Confidentialité intégréeVotre travail reste avec vous
background: linear-gradient(135deg, #06B6D4, #8B5CF6);Votre travail reste privé dans le navigateur pendant l’utilisation de cet outil.
Que fait générateur de dégradés css ?
Créez un dégradé CSS linéaire ou radial à deux couleurs, prévisualisez-le, inversez ses extrémités et copiez une déclaration background complète.
- Entrée
- Deux couleurs, un type de dégradé et, pour le mode linéaire, un angle.
- Résultat
- Une déclaration CSS background contenant le dégradé.
- Prix
- Gratuit
- Compte
- Non requis
Comment utiliser générateur de dégradés css
Choisissez les réglages
Ajustez le résultat et copiez un CSS prêt à utiliser.
Enregistrez ou copiez
Une déclaration CSS background contenant le dégradé.
Conseil pratique
Vérifiez le contraste à plusieurs endroits lorsque du texte recouvre le dégradé.
Quand utiliser générateur de dégradés css
Créer le fond d’une bannière ou d’une carte avec deux couleurs connues.
Tester la direction visuelle en inversant les extrémités.
Choisir un angle avant de coller le résultat dans une feuille CSS.
Exemple
Un exemple concret avec générateur de dégradés css
- Entrée
- Départ #06B6D4 et arrivée #8B5CF6.
- Paramètres
- Dégradé linéaire à 135°.
- Résultat
- background: linear-gradient(135deg, #06B6D4, #8B5CF6);
À quoi s’attendre
Fonctionnement
Le mode linéaire sérialise l’angle et les deux couleurs dans linear-gradient(). Le mode radial produit radial-gradient(circle, départ, arrivée) sans angle.
Avant utilisation
Limites et cas particuliers
- L’outil accepte exactement deux couleurs et ne propose pas d’étapes supplémentaires ou de positions personnalisées.
- L’aperçu dépend du navigateur et ne mesure ni le banding, ni le contraste en tout point, ni le rendu imprimé.
Questions fréquentes
Questions sur Générateur de dégradés CSS
générateur de dégradés css est-il gratuit ?
Oui. Générateur de dégradés CSS est gratuit.
générateur de dégradés css garde-t-il mon travail privé ?
Oui. Votre travail reste privé pendant l’utilisation de l’outil ; rien de ce que vous saisissez n’est envoyé.
Pourquoi l’angle disparaît-il en mode radial ?
Un dégradé radial se développe depuis un cercle et cette version n’utilise pas de direction linéaire.
Puis-je ajouter une troisième couleur ?
Pas dans l’interface actuelle. Ajoutez manuellement d’autres étapes après avoir copié le CSS.