Comment générer un dégradé CSS propre pour un site web ?
Générateur de dégradés CSS : linéaire, radial, conique, avec interpolation OKLCH optionnelle (perceptuellement uniforme) au lieu de sRGB.
Le gain clé : les dégradés blendés en OKLCH évitent le point médian gris boueux courant en sRGB : bleu→jaune en sRGB passe par du gris boueux, en OKLCH par du cyan/vert propre.
Choisis le type, règle les stops et l'angle : obtiens du code CSS et Tailwind prêt. Tout en local.
Comment l'utiliser
- Choisis un type : Linéaire (ligne), Radial (depuis le centre), Conique (autour d'un angle, comme une horloge). Linéaire et Conique ont un curseur d'angle 0-360°.
- Chaque stop a : couleur (HEX, picker natif), position 0-100 %, X pour retirer. Clique sur « Ajouter un stop » : le générateur en insère un nouveau dans le plus grand écart. Max 8 stops.
- Choisis l'interpolation : sRGB (classique, parfois des points médians boueux) ou OKLCH (perceptuel, plus propre). Garde OKLCH pour le travail en production.
- CSS et Tailwind se régénèrent en direct. Clique sur « Copier » pour récupérer le snippet.
- Six préréglages en bas (Sunset, Ocean, Forest, Aurora, Ice, Mono) pour un démarrage rapide.
Quand c'est utile
Là où le générateur de dégradé paie, emplacements typiques :
- Sections hero : chaque landing page a besoin d'un dégradé marquant.
- Marque : un dégradé de deux couleurs de marque = style cohérent.
- Fonds d'app : un dégradé subtil rend une UI banale premium.
- Boutons : un subtil radial au hover ajoute de la vie.
- Cartes : dégradé conique comme « shimmer » (loading state).
- Templates d'e-mail : l'e-mail HTML supporte les dégradés depuis 2020.
- Designers qui migrent vers OKLCH : compare sRGB vs OKLCH côte à côte et vois la différence sur des dégradés de couleurs complémentaires (bleu→jaune, rouge→vert montrent l'écart le plus).
Questions et réponses
Parce que les navigateurs interpolent nativement entre les stops en sRGB. Pour obtenir un effet perceptuel OKLCH, on insère environ 10 stops intermédiaires par segment : le navigateur interpole linéairement entre eux et le résultat est pratiquement identique à de la vraie interpolation OKLCH. CSS Color Level 4 a une syntaxe native « in oklch » mais le support est encore limité (Chrome 113+, Safari 16.4+, Firefox 113+).