Générer des Gradients CSS
Concevoir de beaux gradients CSS et copier le code.
Comment utiliser le Générateur de graduation CSS
Choisir linéaire ou radial
Linéaire se mélange le long d'une ligne droite. Le radial s'étend vers l'extérieur à partir d'un point central.
Ajouter et mettre en position des stops de couleur
Ajoutez autant de couleurs que vous avez besoin et faites glisser chaque arrêt pour le placer le long du dégradé.
Copier le CSS
Ajustez l'angle ou la forme jusqu'à ce qu'il soit bien placé, puis copiez le CSS généré dans votre feuille de style.
À propos de la Générateur de graduation CSS
La syntaxe des dégradés CSS est facile à lire et misérable à écrire à partir de la mémoire. Les angles sont mesurés à partir d'une direction qui surprend la plupart des gens la première fois, les positions des arrêts de couleurs interagissent de manière difficile à prévoir, et la seule façon fiable d'obtenir un dégradé correct est de voir le changement pendant que vous l'ajustez.
Un gradient linéaire se mélange le long d'une ligne droite à l'angle que vous définissez, et est celui à utiliser pour les boutons, les sections héros et les bandes de fond. Un gradient radial s'étend vers l'extérieur d'un point central dans un cercle ou une ellipse, qui convient aux projecteurs, aux lueurs et aux vignettes subtiles.
La sortie est un CSS clair, prêt à la production sans dépendance sur ce site et aucun préfixe de fournisseur vous n'avez pas besoin, puisque chaque navigateur actuel supporte des gradients non préfixés depuis des années. Tout fonctionne dans votre navigateur, et le CSS généré est à vous d'utiliser dans tout projet, commercial ou autre.
Foire aux questions
- Comment créer un dégradé CSS ?
- Choisissez linéaire ou radial, ajoutez vos stops de couleur, définissez l'angle, puis copiez le CSS généré directement dans votre feuille de style.
- Quelle est la différence entre linéaire et radial?
- Un gradient linéaire se mélange le long d'une ligne droite à un angle que vous choisissez. Un gradient radial s'étend vers l'extérieur dans un cercle ou une ellipse à partir d'un point central.
- Puis-je utiliser plus de deux couleurs?
- Oui. Ajoutez autant d'arrêts de couleur que vous avez besoin et positionnez chacun le long du dégradé.