Qu'est-ce qu'un générateur de dégradé CSS ?
Un générateur de dégradé CSS est un outil visuel qui vous permet de concevoir des dégradés linéaires, radiaux ou coniques et produit instantanément le code CSS correspondant. Au lieu d'écrire la syntaxe du dégradé à la main, vous pouvez ajuster les couleurs, les positions et les angles de manière interactive et copier le code prêt à l'emploi directement dans votre feuille de style.
Comment utiliser ce générateur de dégradé CSS
- Sélectionnez deux couleurs à l'aide des sélecteurs de couleur, choisissez un type de dégradé (linéaire, radial ou conique) et ajustez l'angle avec le curseur.
- L'aperçu du dégradé et le code CSS se mettent à jour en temps réel au fur et à mesure que vous apportez des modifications.
- Cliquez sur « Aléatoire » pour générer une combinaison de couleurs aléatoire, ou sur « Copier CSS » pour copier le code généré.
Concepts clés
Un dégradé CSS est une transition lisse entre deux ou plusieurs couleurs rendue nativement par le navigateur sans images. Les dégradés linéaires s'écoulent en ligne droite à un angle spécifié. Les dégradés radiaux s'étendent vers l'extérieur à partir d'un point central en forme circulaire ou elliptique. Les points de couleur définissent où chaque couleur apparaît le long du dégradé ; l'ajustement de leurs positions contrôle la rapidité avec laquelle les couleurs se fondent les unes dans les autres.
Questions fréquemment posées
Combien de couleurs puis-je utiliser ?
Cet outil supporte deux points de couleur. Pour les dégradés simples à deux couleurs, cela couvre les cas d'usage les plus courants. Vous pouvez ajouter manuellement plus de points de couleur en modifiant directement le code CSS généré.
Le code CSS généré est-il compatible avec tous les navigateurs ?
Oui. Les dégradés CSS modernes sont pris en charge dans tous les navigateurs actuels, y compris Chrome, Firefox, Safari et Edge. Le code généré utilise la syntaxe standard sans préfixes de fournisseur.
Puis-je créer des dégradés transparents ?
Oui. Définissez le canal alpha sur n'importe quel point de couleur pour créer des zones transparentes ou semi-transparentes. C'est particulièrement utile pour les effets de superposition et pour estomper le contenu dans un arrière-plan.