Générateur de Dégradés
Créez de beaux dégradés CSS pour vos designs. Générez des dégradés linéaires, radiaux et coniques avec des points de couleur personnalisés et copiez le code CSS instantanément.
Color Stops
Code CSS
background: linear-gradient(90deg, #3B82F6 0%, #10B981 100%); Préréglages
Table des matières
Qu'est-ce qu'un dégradé CSS ?
Un dégradé CSS est une transition fluide entre deux ou plusieurs couleurs. Les dégradés sont un outil de design puissant qui peut ajouter de la profondeur, de la dimension et de l'intérêt visuel à vos designs web.
Les dégradés CSS sont largement pris en charge par tous les navigateurs modernes et peuvent être utilisés pour les arrière-plans, les bordures, les effets de texte et bien plus encore.
Types de dégradés expliqués
Dégradé linéaire
Les dégradés linéaires font la transition des couleurs le long d'une ligne droite. Vous pouvez contrôler la direction en utilisant un angle ou des mots-clés directionnels.
Exemple : linear-gradient(90deg, #3B82F6, #10B981)
Dégradé radial
Les dégradés radiaux font la transition des couleurs depuis un point central vers l'extérieur en motif circulaire ou elliptique. Parfaits pour des effets de projecteur.
Exemple : radial-gradient(circle at center, #3B82F6, #10B981)
Dégradé conique
Les dégradés coniques font la transition des couleurs autour d'un point central, comme une roue chromatique. Idéaux pour des graphiques en secteurs.
Exemple : conic-gradient(from 0deg at center, #3B82F6, #10B981)
Cas d'utilisation
Les dégradés CSS sont polyvalents et peuvent être utilisés dans de nombreux contextes de design :
- Arrière-plans: Créez des arrière-plans accrocheurs pour les sites web, sections ou composants
- Boutons: Ajoutez de la profondeur et de l'intérêt visuel aux boutons
- Cartes: Améliorez les designs de cartes avec des dégradés subtils ou audacieux
- Effets de texte: Appliquez des dégradés au texte pour une typographie moderne
- Bordures: Créez des bordures dégradées avec background-clip ou border-image
- Superpositions: Utilisez des dégradés comme superpositions sur des images pour améliorer la lisibilité du texte
- Visualisation de données: Créez des graphiques et des visualisations avec des couleurs dégradées
- Identité de marque: Intégrez des dégradés dans l'identité visuelle de votre marque
Points de couleur
Les points de couleur définissent où les couleurs commencent et se terminent dans un dégradé.
Position
La valeur de position détermine où la couleur apparaît dans le dégradé. Les valeurs vont de 0% (début) à 100% (fin).
Points multiples
Vous pouvez ajouter plusieurs points de couleur pour créer des dégradés complexes et multicolores.
Format de couleur
Les points de couleur acceptent toute valeur de couleur CSS valide, y compris les codes hex, les valeurs RGB, HSL et les couleurs nommées.
Meilleures pratiques
Restez subtil
Bien que les dégradés audacieux puissent être accrocheurs, les dégradés subtils fonctionnent souvent mieux pour les designs professionnels.
Considérez le contraste
Assurez un contraste suffisant entre les couleurs du dégradé et tout texte ou contenu placé dessus.
Utilisez des couleurs appropriées
Choisissez des couleurs qui fonctionnent bien ensemble. Les couleurs complémentaires créent souvent les dégradés les plus harmonieux.
Limitez les points de couleur
2-4 points créent généralement les dégradés les plus propres et efficaces.
Testez sur différents écrans
Les dégradés peuvent apparaître différemment sur divers écrans et appareils.
Considérations de performance
Les dégradés CSS sont performants et ne nécessitent pas de fichiers image.
Questions fréquentes
Les dégradés linéaires font la transition le long d'une ligne droite. Les radiaux depuis un point central vers l'extérieur. Les coniques autour d'un point central.
Oui ! Les dégradés CSS sont une technologie web standard et peuvent être utilisés librement dans n'importe quel projet.
Utilisez background-clip: text avec -webkit-background-clip: text et -webkit-text-fill-color: transparent.
Oui ! Vous pouvez animer des dégradés avec des animations ou des transitions CSS.
Les dégradés linéaires et radiaux sont pris en charge par tous les navigateurs modernes. Les coniques ont un excellent support dans les navigateurs modernes.
Pour la plupart des designs, 2-4 points de couleur fonctionnent mieux.
Actuellement, les dégradés ne sont pas sauvegardés automatiquement. Vous pouvez copier le code CSS et le sauvegarder manuellement.