Générateur de gradient CSS
Créez des gradients CSS linéaires, radiales et coniques dans votre navigateur.
Les couleurs s’arrêtent
Utilisez les gants d'arrêt ou les panneaux de clavier pour modifier les positions. Chaque arrêt comprend une couleur explicite, l'opacité et le pourcentage.
Traitement local natif
Votre gradient reste dans ce navigateur. aucun coloris ou CSS généré ne sont envoyés à Converter.
Grammaire limité d'importation
L'importation accepte le gradient linéaire(), le gradent radial(), ou le graduent conique(), avec des couleurs et des pourcentages hex. Les déclarations, les URL, les variables et les fonctions inconnues sont rejetées localement.
Accès à Fallback
Le CSS généré comprend un solide back-back de couleur en arrière-plan, à côté du gradient pour les renderings non supportés et le chrome de contrôle accessible.
Questions fréquemment posées
Mon gradient est-il enlevé ?
N. État de gradient, couleurs, CSS importés et CSS générés restent dans votre navigateur.
Quels types de gradients CSS sont-ils soutenus ?
Le générateur crée des sorties gradient linéaire(), radial-gradient(), et conic-gradent() avec plusieurs stops hex de couleur.
Que puis-je importer ?
L'importation accepte un grammaire délibérément limité en utilisant une fonction gradiente soutenue, des couleurs hex, 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 gradients CSS linéaires ou radiales et prévoyez les stops de couleur, l'angle, la position et la répétition.
- Entrée
- Type de gradient, arrêts de couleur, positions, angle et paramètres répétés.
- Sortie
- Une prévision en direct et une déclaration de fond CSS copiable.
- Les limites réelles
- Le rendu du navigateur peut différer légèrement par moteur, et l'outil n'évalue pas le contraste ou ne garantit pas le support dans les navigateurs héréditaires.
- 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. Converter 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
- Fournir le type de gradient, les arrêts de couleur, les positions, l'angle et les paramètres répétés dans les contrôles d'outil.
- Choisissez les paramètres qui affectent une prévision en direct et une déclaration de fond CSS copiable, puis exécutez l'outil.
- Vérifier une prévision en direct et une déclaration de fond CSS copiable avant de la copier ou de le télécharger.
Modes communs d'échec
Une défaillance de la couleur, une couleur invalide ou une position incompatible empêche une déclaration CSS valide d’être construite.
Exemple utile
Créez un gradient linéaire de 90 degrés de #111827 à 0% à #f59e0b à 100% et copiez la déclaration.