Aller au contenu principal
LibraTool logoLibraTool

Générateur de dégradés CSS — outil gratuit

Créez des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct. Copiez le CSS en un clic.

Fonctionne hors ligne une fois chargé
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Évite les teintes grisâtres au milieu entre des couleurs très différentes. Ajoute une ligne sRGB simple en solution de repli pour les anciens navigateurs.

0%
100%

Préréglages

Utilisations courantes

  • Créer des dégradés pour les sections HeroConcevez des arrière-plans dégradés pleine page pour les sections héros des sites Web et les pages de renvoi.
  • Créer des boutons et des appels à l'action dégradésConcevez des arrière-plans de boutons dégradés accrocheurs pour les appels à l'action qui se démarquent.
  • Créer des arrière-plans dégradés pour les cartesConcevez des remplissages dégradés pour les cartes, les modales, les barres latérales et les arrière-plans des composants d'interface utilisateur.
  • Créer des dégradés pour les graphiques des médias sociauxConcevez des arrière-plans dégradés vibrants pour les messages Instagram, les miniatures YouTube et les cartes Twitter.
  • Créer des échelles de couleurs pour les graphiquesGénérez des échelles de couleurs dégradées pour les cartes thermiques, les barres de progression et les visualisations de données.

Comment ça marche

Le générateur de dégradé construit des chaînes de dégradé CSS directement dans le navigateur — sans bibliothèque, sans serveur, sans envoi de fichier. Une fonction écrite à la main assemble la syntaxe linear-gradient, radial-gradient ou conic-gradient correcte à partir de vos arrêts de couleur et de votre angle en temps réel, puis formate le résultat pour le format de sortie choisi.

  1. 1
    Configurez les arrêts et la direction
    Vous définissez entre 2 et 6 arrêts de couleur avec le sélecteur de couleur natif du navigateur, puis positionnez chaque arrêt le long de l'axe 0–100 % avec un curseur. Pour les dégradés linéaires et coniques, vous choisissez aussi un angle (0–360°) ; pour les dégradés radiaux, vous choisissez la forme (ellipse ou cercle) et le mot-clé de taille qui contrôle jusqu'où le dégradé s'étend.
  2. 2
    buildCss assemble la chaîne de dégradé
    À chaque changement, une fonction locale buildCss concatène vos paramètres dans le bon appel de fonction CSS — par exemple linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Aucune bibliothèque n'est impliquée ; la chaîne est construite avec une simple logique de gabarit JavaScript et assemblée directement à partir du tableau d'arrêts.
  3. 3
    L'aperçu en direct se rend via un style en ligne
    La chaîne de dégradé assemblée est appliquée directement à un élément div comme style de fond en ligne, afin que le moteur CSS du navigateur lui-même rende l'aperçu. Il n'y a ni canevas ni image impliqués — ce que vous voyez est littéralement la propriété CSS appliquée.
  4. 4
    Résultat prêt à copier en quatre formats
    Un sélecteur de format transforme la même chaîne de dégradé en CSS brut (background: ...), un bloc CSS avec repli en couleur unie, une classe Tailwind à valeur arbitraire, ou une déclaration de variable SCSS. Cliquer sur Copier écrit le résultat sélectionné dans le presse-papiers via navigator.clipboard.writeText. Le dégradé actuel est aussi encodé dans le hash de l'URL afin que vous puissiez le mettre en favori ou le partager.

Outils associés

🟦

Générateur CSS Grid

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Essayer
↔️

Générateur CSS Flexbox

Expérimentez avec la direction flex, le retour à la ligne, la justification et l'alignement sur des éléments en direct — et copiez le CSS.

Essayer
🧮

Calculatrice Matricielle

Additionnez, soustrayez, multipliez, transposez, inversez et réduisez des matrices, avec déterminant, rang, valeurs propres et résolution de Ax = b, jusqu'à 8×8, avec copie en un geste. Gratuit et privé.

Essayer

Questions fréquemment posées