Générateur de dégradé CSS
Générez du code de dégradé CSS en aperçu simplement en choisissant les couleurs et les angles
Caractéristiques
Aperçu et code mis à jour simultanément
L'apparence et le CSS changent en même temps quand vous modifiez les couleurs ou les angles
Prend en charge linéaire, radial et conique
Spécifiez précisément l'angle, la forme et la position centrale pour chaque type
Jusqu'à 10 couleurs ajustables par glisser-déposer
Ajustez la position des couleurs en glissant sur la barre, la transparence avec le curseur
8 exemples et génération aléatoire
Affinez à partir de combinaisons de couleurs classiques ou aléatoires
Comment utiliser
Choisir le type
Sélectionnez le type de dégradé : linéaire, radial ou conique
Décider les couleurs
Choisissez une couleur par code ou exemple, ajoutez des couleurs avec « Ajouter une couleur » et ajustez la position et la transparence
Ajuster l'orientation
Pour linéaire : spécifiez l'angle ou utilisez les boutons de direction ; pour radial et conique : définissez la position centrale
Copier le code
Cliquez sur « Copier » pour coller le CSS en une ligne dans votre style
Cas d'usage
Créer un arrière-plan d'image héros
Définir la couleur d'arrière-plan du haut du site ou des boutons sans écrire de code
Choisir les couleurs des en-têtes de blog
Sélectionnez une combinaison proche des exemples pour organiser l'arrière-plan de l'en-tête de l'article
Superposition sur une photo
Créer une couche semi-transparente en réduisant la transparence de la couleur placée sur la photo
Ajuster un dégradé multicolore
Serrer progressivement la position des limites entre 3 couleurs ou plus en glissant
Connaissances fondamentales
Différences entre linear, radial et conic
CSS offre 3 fonctions de dégradé différentes selon la façon dont les couleurs changent, toutes utilisées dans la propriété background.
- linear-gradient：linear-gradient crée un dégradé linéaire où les couleurs changent le long d'une ligne à l'angle spécifié.
- radial-gradient：radial-gradient crée un dégradé radial où les couleurs s'étendent du centre vers l'extérieur en forme de cercle ou d'ellipse.
- conic-gradient：conic-gradient crée un dégradé conique où les couleurs changent en tournant autour du centre dans le sens des aiguilles d'une montre.
Correspondance entre angles et mots-clés de direction
L'angle du linear-gradient est 0deg pour la direction ascendante, augmentant dans le sens des aiguilles d'une montre. Les angles peuvent aussi être écrits avec des mots-clés de direction comme « to right », où 90deg équivaut à « to right » et 180deg à « to bottom ».
Comment écrire les arrêts de couleur et la transparence
Un arrêt de couleur (color stop) est la position d'une couleur dans le dégradé : 0% est le point de départ et 100% le point final. Par exemple, « #3B82F6 0%, #8B5CF6 100% » spécifie une transition du bleu au violet.
- Format #RRGGBB：Le format #RRGGBB représente les couleurs avec l'intensité du rouge, du vert et du bleu en hexadécimal sur 2 chiffres ; #FF0000 représente un rouge opaque.
- Format rgba：Le format rgba ajoute la transparence (0 à 1) aux valeurs RGB (0 à 255) ; une transparence de 0,5 représente une couleur semi-transparente.
Sécurité et confidentialité
Tout dans le navigateur
Les données saisies sont traitées uniquement dans votre navigateur et ne sont pas envoyées à l'extérieur.
Traitement dans le navigateur uniquement
Génération de code de dégradé s'effectue entièrement dans votre navigateur et les données saisies ne sont pas envoyées aux serveurs.
Communication chiffrée via HTTPS
Le chargement de la page est également chiffré par TLS et son contenu ne peut être consulté par des tiers.
Aucune transmission à des tiers
Les données saisies ne sont pas transmises à des services externes tels que les réseaux publicitaires ou les suivi.
Aucune sauvegarde automatique des résultats
Couleurs et paramètres choisis et les suggestions de saisie ne sont pas stockés sur le serveur.
Suivez RAKKOTOOLS sur Google Search
185 outils pratiques deviennent plus faciles à découvrir via Google Search et la recherche IA !
- Découvrable en recherche
- Affiché aussi en recherche IA
- Découvrez les nouveaux outils
Mises à jour
- update #312
Ajout du générateur de dégradés CSS : sélectionnez les couleurs et l'angle pour générer le code