EZ2Conv

Générateur de Dégradés CSS

Concevez de magnifiques dégradés CSS linéaires et radiaux avec des arrêts de couleur illimités, des angles ajustables et des contrôles d'opacité. Prévisualisez votre dégradé en temps réel, choisissez parmi les préréglages intégrés et copiez le code CSS prêt pour la production instantanément.

Aperçu

background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);

Réglages

Préréglages

Type de Dégradé
Direction
90°

Points de Couleur

  • Couleur 1

    #3b82f6

    0 %
    100 %

  • Couleur 2

    #8b5cf6

    100 %
    100 %

Comment utiliser

  1. Sélectionner le type de dégradé - Choisissez un dégradé linéaire ou radial selon vos exigences de conception
  2. Ajouter des points de couleur - Cliquez pour ajouter des points de couleur et ajuster leur position et couleurs
  3. Ajuster la direction - Définissez la direction du dégradé ou la position radiale pour l'effet désiré

Créer des dégradés CSS pour le web

Ce que fait ce générateur

Un dégradé CSS fond deux couleurs ou plus sur une forme, et ce générateur transforme ce fondu en CSS prêt à coller, sans que vous ayez à écrire la syntaxe à la main. Vous choisissez le type de dégradé, ajoutez des arrêts de couleur, et l'outil assemble la règle background correspondante — une fonction linear-gradient() ou radial-gradient() — pendant qu'un aperçu en direct reflète chaque modification à l'instant où vous la faites.

Chaque arrêt de couleur possède sa propre teinte, sa position sur le tracé en pourcentage et son opacité : vous décidez donc précisément où une couleur cède la place à la suivante. Les préréglages vous offrent une palette déjà composée à ajuster plutôt qu'une page blanche.

Quand l'utiliser

Pensez-y dès qu'un aplat paraît trop plat : arrière-plans de mise en avant, boutons, cartes, badges et calques de teinte gagnent tous à une transition de couleur discrète. Les designers s'en servent pour prototyper un rendu en quelques secondes ; les développeurs pour récupérer la bonne syntaxe sans mémoriser les mots-clés d'angle ni les règles de pourcentage.

Il est aussi précieux pour reconstruire un dégradé existant : recréez-le arrêt par arrêt, ajustez l'angle et collez le résultat directement dans une feuille de style ou un styled-component.

Exemple : un dégradé linéaire

Imaginons un fondu diagonal du bleu vers le violet. Réglez le type sur linéaire, placez un premier arrêt à 0% et un second à 100%, puis fixez l'angle à 135deg. Le résultat devient background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);. Passez en radial et ces deux mêmes arrêts s'affichent en radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%), se propageant du centre vers l'extérieur au lieu de suivre une ligne.

Types de dégradés, arrêts et cas particuliers

Les dégradés linéaires suivent une ligne droite dont vous réglez l'angle ou la direction ; les dégradés radiaux se propagent depuis un point central avec une forme (circle ou ellipse), une taille comme farthest-corner et une position X/Y ajustable. Ajouter plus de deux arrêts crée des bandes multicolores, et placer deux arrêts à la même position produit une rupture de couleur nette au lieu d'un fondu progressif. Une opacité inférieure à 100% laisse le dégradé reposer sur une photo ou un autre calque. Une fois le rendu satisfaisant, copiez le CSS ou téléchargez-le pour l'intégrer à votre projet.

Questions fréquentes

Oui. La création de dégradés n'ajoute aucun filigrane et ne limite pas le nombre d'arrêts de couleur, de préréglages ou d'exports que vous utilisez. Les modes linéaire et radial, le réglage d'opacité et la copie du CSS en un clic sont accessibles sans abonnement.

Outils Connexes

Convertisseur de Couleurs

Convertissez instantanément des couleurs entre les formats HEX, RGB, HSL, HSV, CMYK et LAB à l'aide d'un sélecteur de couleur visuel et de curseurs HSL. Générez des palettes de couleurs harmonieuses grâce aux schémas complémentaire, triadique, analogue et à d'autres principes de la théorie des couleurs.

Générateur d'Ombres CSS

Composez des effets box-shadow et text-shadow CSS sur mesure grâce à un éditeur visuel gérant les ombres multicouches, les options inset et des réglages ajustables de décalage, flou, étalement et opacité. Prévisualisez sur des boîtes, boutons, cartes ou du texte, puis copiez un CSS prêt à l'emploi.

Générateur de Balises Meta

Composez vos balises meta SEO — titre, description, mots-clés, auteur, URL canonique, Open Graph et Twitter Card — à partir d'un simple formulaire. Configurez les directives robots, prévisualisez l'apparence de votre page dans les résultats de recherche, puis copiez le HTML prêt à coller.

Générateur de Favicon

Générez des favicons pour sites web à partir d'images, de texte ou d'émojis dans toutes les tailles standard de 16x16 à 512x512. Personnalisez les couleurs, arrière-plans et coins arrondis, puis téléchargez individuellement ou en ZIP avec le code HTML prêt à l'emploi.