Générateur de dégradés CSS
Qu'est-ce qu'un dégradé CSS ?
Les dégradés CSS vous permettent d'afficher des transitions fluides entre deux couleurs ou plus sans utiliser de fichiers image. Il en existe trois types : linear-gradient (le long d'une ligne droite), radial-gradient (rayonnant à partir d'un point central) et conic-gradient (balayant autour d'un point central). Les dégradés sont utilisés pour les arrière-plans, les boutons, les superpositions et les éléments décoratifs.
Comment utiliser le générateur de dégradés CSS
-
Choisissez un préréglage parmi les échantillons ou configurez votre propre dégradé.
-
Choisissez le type de dégradé : linear, radial ou conic.
-
Ajustez l'angle (pour linear/conic) ou la forme (pour radial).
-
Modifiez les points de couleur — changez les couleurs et les positions (0–100%).
-
Ajoutez ou supprimez des points de couleur selon vos besoins.
-
Copiez le CSS et collez-le dans votre feuille de style.
Questions fréquemment posées
Comment créer un dégradé transparent ? Utilisez les valeurs de couleur rgba() ou hsla() avec un canal alpha de 0 pour une transparence totale. Par exemple, un arrêt de couleur rgba(0,0,0,0) est du noir totalement transparent, utile pour les dégradés de surimpression sur les images.
Comment créer un arrêt de couleur dur (sans transition) ? Placez deux arrêts de couleur à la même position — l'un se terminant et l'autre commençant à ce point. Par exemple, rouge 50%, bleu 50% crée un changement instantané du rouge au bleu au point médian sans transition de dégradé.
Quels navigateurs prennent en charge les dégradés coniques ? Les dégradés coniques sont pris en charge dans tous les navigateurs modernes (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Ils ne sont pas pris en charge dans Internet Explorer.
Puis-je utiliser plusieurs dégradés sur le même élément ? Oui. CSS background accepte une liste d'éléments séparée par des virgules. Vous pouvez empiler des dégradés, les combiner avec des images de fond et contrôler la position et la taille de chaque couche indépendamment.
Keywords: générateur de dégradé CSS, dégradé linéaire, dégradé radial, dégradé conique, générateur d'arrière-plan CSS, sélecteur de couleur de dégradé, outil dégradé CSS