Paramètres
Dégradés prédéfinis
Aperçu
Code CSS
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);Exemples d'utilisation
Bouton
Bordure
Dossier Web Performance & GPU
CSS Gradients : Accélération Matérielle & Bypassing du LCP
L'abandon des fonds de page bitmap (JPG/PNG) ou des lourds dégradés SVG encodés en base64 au profit des fonctions natives linear-gradient() n'est pas qu'un choix esthétique. C'est une stratégie drastique d'ingénierie front-end ciblant directement le moteur de rendu du navigateur, offrant des temps de peinture à l'écran frôlant le zéro milliseconde.
Domination des Core Web Vitals
L'usage strict du CSS génère un bénéfice asymétrique sur les signaux web vitaux :
- Network Zero : Un dégradé CSS supprime intégralement la latence d'aller-retour HTTP (RTT) requise pour rapatrier un fichier média depuis un CDN.
- Victoire sur le LCP : Si le dégradé constitue le plus grand élément au-dessus de la ligne de flottaison (Hero banner), l'absence de temps de téléchargement écrase littéralement le Largest Contentful Paint.
- Accélération GPU : Chromium et Safari déchargent le calcul mathématique des dégradés du CPU vers la carte graphique (GPU Rendering). Résultat : soixante images par seconde constantes même lors du scrolling.
Pathologies du Rendu (Color Banding)
- Le "Color Banding" : Lors d'une transition sur de vastes surfaces, les écrans 8-bits peinent à lisser les millions de nuances intermédiaires, imprimant des "marches d'escalier" visuelles.
- Astuce Dithering : Les designers seniors pallient parfois ce défaut moteur en superposant une très fine texture de bruit CSS (noise overlay) à opacité marginale (3%), forçant les pixels à "frétiller" pour casser la transition abrupte de la bande colorée.
