Quels types de dégradés sont pris en charge ?

Linéaires (basés sur la direction), radiaux (circulaires ou elliptiques) et coniques (balayage angulaire). Les trois sont standards CSS3 et pris en charge par tous les navigateurs modernes.

Comment ajouter plus de deux couleurs ?

Utilisez le bouton « Ajouter un arrêt » pour ajouter des arrêts de couleur supplémentaires. Chaque arrêt a une couleur et une position entre 0 et 100 pour cent. Vous pouvez avoir jusqu'à 8 arrêts.

Quels navigateurs prennent en charge les dégradés coniques ?

Les dégradés coniques sont pris en charge dans Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+. Pour les navigateurs plus anciens, restez sur des dégradés linéaires ou radiaux.

Puis-je sauvegarder mon dégradé ?

Le générateur produit une déclaration CSS que vous pouvez copier dans votre feuille de style. Le marquage de l'URL complète ne conserve pas l'état actuellement.

Générateur de dégradés CSS

Créez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct

Vos données ne quittent jamais votre appareil

Type de dégradé

Angle: 45°

Arrêts de couleur (2/8)

Aperçu

Sortie CSS

background: linear-gradient(45deg, #ff6e7f 0%, #bfe9ff 100%);

Préréglages

Foire aux questions

Quels types de dégradés sont pris en charge ?

Linéaires (basés sur la direction), radiaux (circulaires ou elliptiques) et coniques (balayage angulaire). Les trois sont standards CSS3 et pris en charge par tous les navigateurs modernes.
Comment ajouter plus de deux couleurs ?

Utilisez le bouton « Ajouter un arrêt » pour ajouter des arrêts de couleur supplémentaires. Chaque arrêt a une couleur et une position entre 0 et 100 pour cent. Vous pouvez avoir jusqu'à 8 arrêts.
Quels navigateurs prennent en charge les dégradés coniques ?

Les dégradés coniques sont pris en charge dans Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+. Pour les navigateurs plus anciens, restez sur des dégradés linéaires ou radiaux.
Puis-je sauvegarder mon dégradé ?

Le générateur produit une déclaration CSS que vous pouvez copier dans votre feuille de style. Le marquage de l'URL complète ne conserve pas l'état actuellement.