CSS Gradient Generator

À propos de cet outil

Le Générateur de Dégradés CSS crée des dégradés multicolores fluides que vous pouvez coller directement dans votre CSS. Il prend en charge les dégradés linéaires (directionnels) et radiaux (circulaires) avec autant d'arrêts de couleur que vous le souhaitez.

Les arrêts de couleur définissent où chaque couleur commence et se termine le long de l'axe du dégradé. Le curseur d'angle fait pivoter les dégradés linéaires de 0° à 360°.

Comment utiliser

1. Sélectionnez le type de dégradé : Linéaire ou Radial.
2. Pour les dégradés linéaires, faites glisser le curseur d'angle pour définir la direction.
3. Cliquez sur un échantillon pour changer la couleur et faites glisser le curseur pour ajuster la position.
4. Cliquez sur + Ajouter un arrêt pour en ajouter davantage. Cliquez sur ✕ pour en supprimer un.
5. Cliquez sur Copier pour copier la déclaration CSS background.

Cas d'utilisation

Les designers web créent des arrière-plans de sections hero avec des dégradés CSS plutôt que des images. Les équipes de marque génèrent des palettes de dégradés correspondant aux directives de couleurs d'entreprise. Les développeurs prototypent des cartes, boutons et superpositions.

Questions fréquentes

• Quelle est la différence entre les dégradés linéaires et radiaux ? — Un dégradé linéaire effectue une transition de couleurs le long d'une ligne droite à un angle donné. Un dégradé radial rayonne les couleurs vers l'extérieur depuis un point central.
• Puis-je utiliser plus de deux couleurs ? — Oui. Cliquez sur + Ajouter un arrêt pour ajouter autant d'arrêts de couleur que nécessaire.
• Le CSS généré est-il compatible avec tous les navigateurs ? — Oui. Les fonctions linear-gradient() et radial-gradient() sont entièrement prises en charge dans tous les navigateurs modernes sans préfixes fournisseur.