Générateur de gradient CSS
Créez des gradients CSS linéaires, radiales et coniques dans votre navigateur.
Arrêts de couleur
Utilisez les poignées d'arrêt ou les touches du clavier pour modifier les positions. Chaque arrêt comprend une couleur explicite, une opacité et un pourcentage.
Traitement local natif
Votre gradient reste dans ce navigateur. aucun coloris ou CSS généré ne sont envoyés à Convertr.
Grammaire d'importation limitée
L'importation accepte linear-gradient(), radial-gradient() ou conic-gradient() avec des couleurs hexadécimales et des pourcentages. Les déclarations, les URL, les variables et les fonctions inconnues sont rejetées localement.
Solution de repli accessible
Le CSS généré comprend une couleur de fond unie en repli à côté du gradient pour les rendus non pris en charge et le chrome de contrôle accessible.
Questions fréquemment posées
Mon gradient est-il téléchargé ?
Non. L'état du gradient, les couleurs, le CSS importé et le CSS généré restent dans votre navigateur.
Quels types de gradients CSS sont pris en charge ?
Le générateur crée une sortie linear-gradient(), radial-gradient() et conic-gradient() avec plusieurs arrêts de couleur hexadécimaux.
Que puis-je importer ?
L'importation accepte une grammaire délibérément limitée utilisant une fonction de gradient prise en charge, des couleurs hexadécimales, des pourcentages facultatifs et des valeurs d'angle ou de position limitées.
Développeur et outils de conception connexes
Générateur de gradient CSS
Construisez des dégradés CSS linéaires ou radiaux et prévisualisez les points d'arrêt de couleur, l'angle, la position et la répétition.
- Entrée
- Type de dégradé, arrêts de couleur, positions, angle et paramètres de répétition.
- Sortie
- Un aperçu en direct et une déclaration de fond CSS copiable.
- Limitations réelles
- Le rendu du navigateur peut différer légèrement selon le moteur, et l'outil n'évalue pas le contraste ni ne garantit la prise en charge dans les navigateurs hérités.
- Confidentialité et traitement des données
- le type de gradient, les arrêts de couleur, les positions, l'angle et les paramètres de répétition sont traités dans cette rubrique du navigateur. Convertr ne reçoit pas ou n'en stockera pas ; fermer ou récharger la page clarifie l'état de travail sauf si l'outil offre explicitement un téléchargement local.
Comment utiliser cet outil
- Fournissez le type de dégradé, les arrêts de couleur, les positions, l'angle et les paramètres de répétition dans les contrôles de l'outil.
- Choisissez les paramètres qui affectent un aperçu en direct et une déclaration de fond CSS copiable, puis exécutez l'outil.
- Consultez un aperçu en direct et une déclaration de fond CSS copiable avant de la copier ou de la télécharger.
Modes d’échec courants
Un arrêt de couleur manquant, une couleur invalide ou une position incompatible empêche la construction d’une déclaration CSS valide.
Exemple utile
Créez un gradient linéaire de 90 degrés de #111827 à 0% à #f59e0b à 100% et copiez la déclaration.