Générateur de Dégradés CSS
Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
Qu'est-ce qu'un dégradé CSS ?
Un dégradé CSS est une valeur d'image CSS qui affiche des transitions fluides entre deux ou plusieurs couleurs sans utiliser de fichiers image. Les dégradés sont rendus par le navigateur, ce qui les rend indépendants de la résolution et très performants.
Quels types de dégradés CSS sont pris en charge ?
Ce générateur prend en charge trois types : linear-gradient (couleurs le long d'une ligne droite), radial-gradient (couleurs rayonnant depuis le centre) et conic-gradient (couleurs tournant autour d'un point central comme une horloge).
Quelle est la différence entre dégradés linéaires et radiaux ?
Les dégradés linéaires font transitionner les couleurs le long d'une ligne droite définie par un angle ou un mot-clé de direction. Les dégradés radiaux font transitionner les couleurs vers l'extérieur depuis un point central en formes circulaires ou elliptiques.
Combien d'arrêts de couleur puis-je utiliser ?
Vous pouvez utiliser autant d'arrêts de couleur que nécessaire. Chaque arrêt définit une couleur et optionnellement une position (0% à 100%) le long de la ligne de dégradé. Plusieurs arrêts créent des transitions complexes multicolores.
Comment utiliser le code CSS généré ?
Copiez le code CSS généré et collez-le comme valeur de la propriété background ou background-image dans votre feuille de style CSS. Le code fonctionne dans tous les navigateurs modernes.
Que sont les arrêts de couleur dans les dégradés ?
Les arrêts de couleur définissent des couleurs spécifiques à des positions spécifiques le long de la ligne de dégradé. Par exemple, "red 0%, blue 50%, green 100%" crée un dégradé qui commence rouge, transitionne vers le bleu au milieu et finit vert.
Puis-je créer des dégradés inclinés ?
Oui, les dégradés linéaires prennent en charge les valeurs d'angle de 0deg à 360deg. Vous pouvez aussi utiliser des mots-clés de direction comme "to right", "to bottom", "to top left" pour les angles courants.
Les dégradés CSS sont-ils responsifs ?
Oui, les dégradés CSS sont intrinsèquement responsifs car ils sont vectoriels et rendus par le navigateur. Ils s'adaptent parfaitement à toute taille de conteneur sans perte de qualité ni augmentation de taille de fichier.
Les dégradés CSS affectent-ils les performances ?
Les dégradés CSS sont généralement très performants. Ils éliminent les requêtes HTTP pour les fichiers image et sont accélérés matériellement. Cependant, des dégradés extrêmement complexes peuvent affecter le rendu sur les appareils bas de gamme.
Puis-je utiliser des dégradés pour les arrière-plans et bordures ?
Oui, les dégradés peuvent être utilisés pour background-image, border-image, mask-image et toute propriété acceptant des valeurs d'image CSS. Ils fonctionnent partout où une valeur d'image est attendue.
Quels navigateurs prennent en charge les dégradés CSS ?
Tous les navigateurs modernes prennent en charge les dégradés CSS, y compris Chrome, Firefox, Safari, Edge et Opera. Le support est excellent depuis IE10. Les préfixes vendeurs ne sont plus nécessaires.
Comment créer un dégradé répétitif ?
Utilisez repeating-linear-gradient ou repeating-radial-gradient au lieu des versions standard. Ceux-ci répètent le motif de dégradé pour remplir tout l'élément, créant des effets de rayures ou de motifs.
Puis-je animer les dégradés CSS ?
Les dégradés CSS ne peuvent pas être animés directement avec les transitions CSS. Cependant, vous pouvez animer background-position, background-size ou utiliser des propriétés CSS personnalisées avec @property pour créer des effets d'animation.
Ce générateur de dégradés est-il gratuit ?
Oui, ce générateur de dégradés CSS est entièrement gratuit. Aucune inscription requise, pas de limites d'utilisation, et tout le code généré est le vôtre pour utiliser dans n'importe quel projet sans attribution.