CSS Gradient Generator
Create CSS gradients
Create CSS gradients S'exécute localement dans votre navigateur
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
Le générateur de dégradé CSS crée un véritable dégradé linéaire ou radial à partir de deux couleurs et d'un angle, l'affiche en taille réelle et vous remet le CSS. L'angle est la partie que les gens ont mal interprétée : en CSS, 0 deg pointe vers le haut et la direction tourne dans le sens des aiguilles d'une montre, donc 90 deg s'étend de gauche à droite et 180 deg, de haut en bas. Se tromper est la raison pour laquelle un dégradé semble souvent à l’envers la première fois. Les deux couleurs peuvent porter une valeur alpha à huit chiffres, ce qui permet d'estomper un dégradé sur une image de héros.
Where people use the
- Construire un arrière-plan de héros qui se fond entre deux couleurs de marque.
- Tester quel angle semble correct avant de s'y engager dans le code.
- Produire un subtil dégradé vertical pour une carte ou un bouton.
- Création d'une superposition semi-transparente qui assombrit une photographie.
How to use the
- 1
Choisissez les couleurs de début et de fin
Utilisez le sélecteur de couleurs ou saisissez une valeur hexadécimale. L'aperçu et le CSS sont mis à jour au fur et à mesure que vous les modifiez.
- 2
Choisissez linéaire ou radial
Le linéaire traverse la boîte selon un angle choisi. Le radial s'étend vers l'extérieur à partir du centre sous forme d'un cercle.
- 3
Définir l'angle
Faites glisser le curseur de 0 à 360 degrés. N'oubliez pas que 0° pointe vers le haut, 90° vers la droite, 180° vers le bas, 270° vers la gauche.
- 4
Copiez le CSS
La règle est une déclaration d'arrière-plan que vous pouvez coller directement dans une feuille de style ou dans une propriété background-image si vous préférez.
Conseils et bonnes pratiques
- Préférez une petite différence de luminance pour les fonds qui comportent du texte ; cela se lit comme une texture plutôt que comme une distraction.
- Pour le texte sur un dégradé, vérifiez le contraste aux points les plus clairs et les plus sombres, pas seulement à la moyenne.
- Gardez les pentes à deux ou trois arrêts ; plus a tendance à paraître boueux.
Questions fréquemment posées
Dans quelle direction pointe l’angle ?
Zéro degré pointe vers le haut de l’élément et l’angle augmente dans le sens des aiguilles d’une montre. Donc 90 degrés vont vers la droite et 180 degrés vers le bas. Ceci est contre-intuitif si vous êtes habitué aux angles mathématiques mesurés dans le sens inverse des aiguilles d’une montre à partir de la droite.
Pourquoi mon dégradé semble-t-il bandé ?
Parce que deux couleurs proches en luminance produisent des étapes visibles sur un écran 8 bits, en particulier sur une grande surface. L'ajout d'un troisième stop subtil ou l'utilisation d'une plage de luminance légèrement plus large le masque généralement.
Puis-je utiliser la transparence ?
Oui. Utilisez une valeur hexadécimale à huit chiffres telle que 667eea00 pour une transparence totale ou 667eea80 pour la moitié, et le dégradé s'estompera sur tout ce qui se trouve derrière.
Le dégradé est-il pris en charge partout ?
Les dégradés linéaires et radiaux sont pris en charge dans tous les navigateurs actuels sans préfixe. Les préfixes des fournisseurs ne sont nécessaires que pour les très anciennes versions de Safari et d'Android, ce qui signifie en pratique que rien n'a été construit après 2015 environ.
Pourquoi mon dégradé n'apparaît-il pas ?
Parce que l'élément n'a pas de hauteur. Un dégradé est peint dans la boîte de l'élément, donc un div vide se réduit à une hauteur nulle et ne montre rien. Définissez une hauteur ou ajoutez du contenu.
Génère-t-il plus de deux arrêts de couleur ?
Non, cet outil en gère deux. Pour un dégradé à plusieurs arrêts, prenez le CSS qu'il produit et ajoutez des arrêts à la main ; la syntaxe est simplement constituée de paires de couleurs et de pourcentages séparées par des virgules.