Aller au contenu
← 1001 Widgets
N° 032 · ●○○

Générateur de dégradés

Deux couleurs, un angle, linéaire ou radial : le dégradé s'affiche en direct et le CSS est prêt à copier. Le bon exercice pour piloter du CSS depuis JavaScript.

CSSJS
Ce qu'on apprend
  • Lire un champ de type color
  • Écrire un style en direct avec element.style
  • Copier du texte avec l'API Clipboard
Pourquoi ce langage

Pourquoi un générateur de dégradés ? Écrire linear-gradient à la main, c'est deviner l'angle, recharger, recommencer. Avec deux pastilles de couleur et un curseur, on voit le résultat tout de suite, et on copie la ligne exacte.

Le navigateur fournit déjà un sélecteur de couleur avec input type="color". On ajoute un champ texte pour coller un code hexadécimal, et on garde les deux synchronisés.

Le CSS généré commence par une couleur unie : c'est la solution de repli pour les vieux navigateurs.

Pourquoi en JavaScript simple ? Trois champs, une chaîne de caractères construite, et une ligne pour l'appliquer. Rien d'autre.

Comment ça marche

  1. LE HTML

    Le sélecteur natif et un champ texte pour coller un code.

    <input type="color" id="c1" value="#c8f060"> <input id="t1" value="#c8f060">
<input type="color" id="c2" value="#13131c"> <input id="t2" value="#13131c">
<input type="range" id="angle" min="0" max="360" step="5" value="135">
<div id="apercu"></div> <pre id="css"></pre>

  2. CONSTRUIRE LE DÉGRADÉ

    const val = id => document.getElementById(id).value;
const degrade = () => `linear-gradient(${val('angle')}deg, ${val('c1')}, ${val('c2')})`;

  3. APPLIQUER ET AFFICHER LE CODE

    La première ligne est une couleur unie, au cas où le dégradé ne serait pas compris.

    function maj() {
  document.getElementById('apercu').style.background = degrade();
  document.getElementById('css').textContent = `background: ${val('c1')};\nbackground: ${degrade()};`;
}

  4. GARDER LES DEUX CHAMPS D'ACCORD

    On n'accepte le texte que s'il ressemble à #rrggbb.

    const HEX = /^#[0-9a-f]{6}$/i;
c1.addEventListener('input', () => { t1.value = c1.value; maj(); });
t1.addEventListener('input', () => { if (HEX.test(t1.value)) { c1.value = t1.value; maj(); } });

  5. COPIER

    document.getElementById('copier').addEventListener('click', async () => {
  try { await navigator.clipboard.writeText(document.getElementById('css').textContent); }
  catch { /* copie refusée : l'utilisateur peut sélectionner le texte */ }
});
Pièges

PIÈGE 1 : Passer une couleur invalide à type="color"

Piège

Mauvais : c1.value = 'c8f060' ou '#abc'. Le sélecteur refuse et repasse en noir.

Fix

Correct : n'accepter que le format complet #rrggbb, en minuscules, et ajouter le # s'il manque.

PIÈGE 2 : Oublier la solution de repli

Piège

Mauvais : une seule ligne background avec le dégradé. Si le navigateur ne la comprend pas, le fond reste vide.

Fix

Correct : une couleur unie d'abord, puis le dégradé qui la remplace.

PIÈGE 3 : Croire que la copie marche partout

Piège

Mauvais : appeler navigator.clipboard sans précaution. Hors HTTPS ou dans un iframe isolé, la promesse est rejetée.

Fix

Correct : un try et catch, et un message qui propose de sélectionner le texte à la main.

PERSONNALISER
  • Plus de deux couleurs, avec la position de chaque arrêt en pourcentage.
  • Un dégradé conique avec conic-gradient, pour des roues de couleur.
  • Des préréglages tirés de la palette du site.
OPTIMISATION
  • Les dégradés entre deux couleurs très différentes passent par un gris terne : ajoutez in oklch dans la fonction pour des transitions plus vives.
  • Mettez les valeurs dans l'URL pour partager un dégradé par lien.
VERS REACT

Les deux couleurs, l'angle et le type vivent dans un useState objet.

Le style de l'aperçu se calcule au rendu : style={{ background: degrade }}.

Le bouton Copier affiche un état « copié » pendant deux secondes avec un setTimeout nettoyé au démontage.

Commentaires
0/1000

Chargement des commentaires…