Degradats CSS
Història i evolució
Abans de CSS3 (2011-2012), els degradats requerien imatges bitmap que augmentaven el temps de càrrega i dificultaven el disseny responsiu. Els primers navegadors com Safari i Firefox van implementar degradats amb prefixos propietaris (-webkit-gradient, -moz-linear-gradient), creant incompatibilitats entre navegadors.
Amb l'estandardització de CSS3, els degradats es van convertir en una característica nativa del llenguatge. L'evolució va continuar amb els degradats radials (2012), després els cònics (2018), i actualment amb funcions avançades com repeating-gradient i degradats amb múltiples parades de color.
Els motors de cerca valoren positivament els llocs web ràpids. Substituir imatges de fons per degradats CSS redueix el temps de càrrega inicial, millorant les mètriques Core Web Vitals com el LCP (Largest Contentful Paint).
Bones pràctiques
Per maximitzar l'impacte visual i el rendiment dels degradats, cal seguir aquestes recomanacions professionals:
Limita el nombre de parades de color. Tot i que CSS permet fins a 1000 colors en teoria, per a la majoria d'usos 2-5 colors són suficients. Els degradats complexos poden causar problemes de renderització en dispositius antics.
Utilitza notació hexadecimal o HSL. Els colors en format hexadecimal (#ff6b6b) o HSL (hsl(0, 79%, 72%)) són més llegibles i eficients que RGB. Per degradats amb transparència, HSLA o rgba() permeten control precís de l'opacitat.
Considera l'accessibilitat cromàtica. Si el degradat conté text, assegura un contrast mínim de 4.5:1 per a text normal i 3:1 per a text gran, seguint les directrius WCAG.
Fallbacks per a navegadors antics. Sempre defineix un color sòlid de reserva abans del degradat: background: #ff6b6b; background: linear-gradient(...). Garanteix compatibilitat amb navegadors sense suport per a degradats.
Casos d'ús
Els degradats CSS s'utilitzen extensivament en el disseny modern web: botons amb efectes de profunditat (material design), fons de heros amb transicions de color dramàtiques, targetes amb accents visuals, barres de progrés animades, i overlays sobre imatges per millorar la llegibilitat del text.
Frameworks populars com Bootstrap 5 i Tailwind CSS integren sistemes de degradats predefinits. Material Design d'Android utilitza degradats subtils per crear sensació de profunditat. Les aplicacions web progressives (PWA) empren degradats en splash screens i interfícies per transmetre modernitat i professionalitat.
Curiositats
- Abans de CSS3 (2011), els degradats de fons requerien imatges bitmap, el que significava una petició HTTP extra i diversos kilobytes addicionals per a cada pàgina que els usava.
- El logotip d'Instagram presenta un gradient icònic del porpra al groc-taronja que tècnicament s'implementa amb múltiples parades de color CSS i s'ha convertit en un dels degradats digitals més reconeixibles del món.
- conic-gradient() va ser proposat el 2011 però no va tenir suport complet en tots els navegadors principals fins al 2020. Gairebé una dècada després de l'estandardització de linear-gradient.
- Un degradat CSS ocupa aproximadament 100 bytes de codi. Una imatge PNG equivalent pesaria entre 5 i 50 kilobytes. Fins a 500 vegades més dades a transferir.