Quatre types de dégradés
Créez un fond linéaire, radial ou conique. Pour un mélange multipoint, superposez des zones de couleur radiales.
Générateur de dégradés
Créez un dégradé, ajustez ses couleurs et sa direction, puis copiez le CSS. Vous pouvez aussi partir de l’un des 60 modèles.
Choisir un mode
Autres actions
Outils associés
Vos statistiques
0
Couleurs choisies
0
Palettes exportées
0
Dégradés créés
0
Contrastes vérifiés
Sélecteur de couleur
Mode le plus utilisé
0%
Score d’activité
Comment créer un dégradé CSS
Impossible de charger la vidéo. Vous pouvez suivre les instructions ci-dessous.
La vidéo présente l’interface en anglais.
Linéaire mélange les couleurs en ligne droite, Radial depuis un centre et Conique autour d’un centre. Choisissez Multipoint pour plusieurs zones de couleur. Utilisez un modèle rapide pour partir de couleurs déjà choisies.
Créez un fond en dégradé CSS
60 modèles de départ
Recherchez un modèle dans la bibliothèque et appliquez-le. Adaptez ensuite les couleurs et leurs positions à votre design.
Arrêts et points de couleur
Les dégradés linéaires, radiaux et coniques acceptent jusqu’à six arrêts de couleur. Les dégradés multipoints permettent jusqu’à dix points.
En afficher 3 de plusAfficher moins
Code CSS et SCSS
Copiez un fond CSS ou une variable SCSS. Après avoir changé la direction ou les positions, vérifiez le résultat dans votre feuille de style.
Limites des formats d’export
Tailwind simplifie le dégradé en version linéaire. Le SVG remplace les modèles coniques et multipoints par un dégradé linéaire. Ces formats peuvent donc différer de l’aperçu.
Autres outils de couleur
Le sélecteur de mode ouvre des pages dédiées au choix de couleurs, à l’extraction depuis une image, aux palettes et au contrôle du contraste.
Questions fréquentes
Comment créer un dégradé CSS ?
Choisissez un type ou un modèle, ajustez les couleurs et leurs positions, puis copiez le fond CSS. Collez-le dans votre feuille de style et vérifiez-le dans le navigateur où votre design sera utilisé.
Quels types de dégradés puis-je créer ?
Des dégradés linéaires, radiaux, coniques et multipoints. Les mélanges multipoints superposent des dégradés radiaux sur une couleur de base, sans fonction CSS distincte pour ce type.
Puis-je créer un dégradé conique ou de type maillage ?
Oui. Un dégradé conique répartit les couleurs autour d’un centre. Un dégradé multipoint superpose des zones radiales pour former un fond de type maillage. Utilisez le CSS pour conserver ces types.
Combien d’arrêts ou de points puis-je ajouter ?
Les dégradés linéaires, radiaux et coniques acceptent jusqu’à six arrêts de couleur. Les multipoints acceptent jusqu’à dix points. Vous pouvez modifier la couleur et la position de chacun.
En afficher 4 de plusAfficher moins
Tous les exports correspondent-ils à l’aperçu ?
Tailwind simplifie le design en dégradé linéaire. Le SVG remplace les dégradés coniques et multipoints par des linéaires. Les PNG et JPG font 1200 × 600 pixels, leurs proportions et mélanges de couleurs peuvent donc différer de l’aperçu CSS. Pour conserver le type de dégradé choisi, utilisez le CSS.
Y a-t-il des modèles prêts à utiliser ?
Oui. Parcourir la bibliothèque donne accès à 60 modèles recherchables couvrant les quatre types. Appliquez-en un comme point de départ, puis modifiez-le.
Le générateur de dégradés est-il gratuit ?
Oui, MORELESS le propose sans compte. Les calculs et la génération du code s’effectuent dans le navigateur.
Comment ouvrir les autres outils de couleur ?
Utilisez le sélecteur de mode au-dessus des réglages du dégradé. Il ouvre des pages dédiées au choix de couleurs, à l’extraction depuis une image, aux palettes et au contrôle du contraste.
Détails techniques
Fonds CSS
Le CSS utilise linear-gradient(), radial-gradient() ou conic-gradient() avec les couleurs et leurs positions. Le moteur CSS du navigateur affiche l’aperçu. Vérifiez le code copié dans votre feuille de style.
Mélanges multipoints
Un dégradé multipoint superpose des fonctions radial-gradient() sur une couleur de base. Chaque point possède une couleur et une position sur deux axes. Il n’existe pas de fonction CSS multipoint-gradient().
En afficher 2 de plusAfficher moins
Limites de l’export de code
Le SCSS place le dégradé dans une variable. Tailwind utilise une direction linéaire simplifiée et une partie des couleurs. Le SVG prend en charge les dégradés linéaires et radiaux et remplace les types coniques et multipoints par des linéaires.
Limites de l’export d’images
Les PNG et JPG sont rendus avec Canvas en 1200 × 600 pixels, avec les couleurs actuelles et les réglages disponibles d’angle, de centre ou de position des points. Leurs proportions fixes et le mélange des couleurs peuvent différer de l’aperçu CSS. L’export d’un dégradé conique en image nécessite sa prise en charge par Canvas.