Meilleur gratuit Générateur de graduation CSS
Construire des gradients CSS linéaires et radiaux avec un aperçu en direct - copiez le code de fond.
100% gratuit
Pas d'inscription
Pas de filigrane
✨
Go Pro pour les meilleurs modèles d'IA - image, vidéo et chat - plus les téléchargements plus grands, la priorité dans la file d'attente et sans attente.
Mise à niveau vers Pro
Amour Best.Free? Partagez-le
Comment ça marche
- Choisir un type. Choisissez linéaire ou radial, et définissez l'angle pour un gradient linéaire.
- Choisir les couleurs et les arrêts. Définir deux couleurs ou plus et leurs positions; ajouter un troisième arrêt dans Options avancées.
- Copier le CSS. Appuyez sur Copier CSS et collez le dégradé de fond dans votre feuille de style.
A propos de cet outil
Construisez un dégradé CSS par œil au lieu de modifier des valeurs aveugles. Passez entre linéaire et radial, faites glisser l'angle pour un dégradé linéaire, et choisissez les couleurs et les positions pour au moins deux arrêts pendant qu'une barre d'aperçu de la largeur complète met à jour en direct. Copiez la propriété de fond résultante directement dans votre feuille de style. Les options avancées ajoutent un troisième arrêt de couleur pour les mélanges plus riches et vous permettent de choisir un cercle ou une forme d'ellipse pour les gradients radiaux.
À quoi les gens s'en servent
- Concevoir un dégradé de fond de héros ou de section
- Créer un bouton ou un dégradé de carte
- Mélanger deux ou trois couleurs de marque en douceur
- Générer un effet de projecteur radial ou de vignette
Foire aux questions
Un gradient linéaire se mélange le long d'une ligne droite à l'angle que vous choisissez; un gradient radial se mélange à l'extérieur d'un point central comme un cercle ou une ellipse.
Pour un gradient linéaire, l'angle fixe la direction du mélange - 0° va de bas en haut, 90° de gauche à droite, etc.
Chaque stop est une couleur placée à un pourcentage le long du gradient. Le déplacement d'un stop change où cette couleur est assise et à quel point le mélange est tranchant.
Oui. Ouvrez Options avancées pour ajouter un troisième stop couleur, inséré entre le premier et le dernier pour un mélange multicolore.
Non. Les couleurs et les arrêts sont transformés en une chaîne CSS localement dans votre navigateur.
Complètement libre, aucun compte et aucune limite - un outil côté client sans rien à mesurer.
Oui. Il fonctionne dans votre navigateur, donc CSS Gradient Generator fonctionne sur les téléphones et tablettes ainsi que le bureau - il n'y a pas d'application à installer.
Habituellement, quelques secondes seulement pour un fichier typique - CSS Gradient Generator commence à travailler le moment où vous lui donnez votre entrée.
L'usage occasionnel est illimité, sous un généreux bouchon à usage équitable qui le maintient rapide pour tout le monde.
Tous les navigateurs modernes - Chrome, Safari, Firefox et Edge. CSS Gradient Générateur n'a besoin de rien installé au-delà du navigateur que vous utilisez déjà.