<!-- Exemplu de utilizare în HTML / JSX -->
<div class="h-64 w-full rounded-2xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-[length:200%_200%] animate-gradient-bg p-8 text-white">
<h3 class="text-2xl font-bold">Card cu Gradient Animat</h3>
<p class="mt-2 opacity-90">Rulează la 60 FPS fără niciun KB de JS.</p>
</div>
/* Adaugă asta în tailwind.config.js la theme.extend */
// keyframes: {
// 'gradient-shift': {
// '0%, 100%': { 'background-position': '0% 50%' },
// '50%': { 'background-position': '100% 50%' },
// },
// },
// animation: {
// 'gradient-bg': 'gradient-shift 6s ease infinite',
// }Am văzut recent pe un proiect de landing page o grămadă de pachete trase doar pentru un banal efect vizual pe un Hero section. Azi îți arăt cum faci un gradient animat super fluid folosind strict Tailwind CSS și CSS nativ, fără să-ți încarci bundle-ul cu librării de animație pe care le plătești la încărcarea paginii.
De ce să nu bagi Framer Motion pentru un simplu fundal?
Am avut cazul acum 3 luni la un audit de performanță pentru o aplicație SaaS. Clientul se plângea că pagina de landing agață când derulezi pe telefoane mid-range. Când am deschis Chrome DevTools, am descoperit că aveau Framer Motion importat exclusiv pentru două chestii: un fade-in simplu și un gradient animat pe fundalul unui card.
Efectul? Aproape 32kB (gzipped) de JavaScript băgați în main bundle complet degeaba. Pe mobil, parsarea scriptului și rularea buclei de animație prin JS bloca thread-ul principal exact când browserul încerca să randeze layout-ul.
Trecerea la o soluție pure CSS a scăzut TBT-ul (Total Blocking Time) cu vreo 140ms și a dus rata de cadre la un 60 FPS constant, chiar și pe un telefon de 800 de lei.
Cum funcționează trucul cu background-size
Mecanica e ridicol de simplă și n-are nicio magie în spate:
- Faci gradientul mai mare decât containerul real (de exemplu
background-size: 200% 200%). - Animezi proprietatea
background-positionde la0% 50%la100% 50%și înapoi într-o buclă infinită.
Browserul mută practic "fereastra" prin care vezi gradientul uriaș din spate. Fiind gestionat direct de compositorul din browser, tranziția e extrem de curată.
Configurare curată în Tailwind CSS
În Tailwind poți folosi clase utilitare pentru culori și dimensiune, plus o mică extindere în config pentru keyframes. Să zicem că vrei un efect organic care trece prin trei culori.
Adaugi clasa bg-[length:200%_200%] ca să mărești fundalul, apoi aplici animația custom pe care o definești în tailwind.config.js sau direct în fișierul tău principal de CSS.
Trade-off-uri sincere: Când MERGE și când NU merge
Trebuie să fim realiști, metoda asta nu e un glonț de argint pentru orice fel de animație complexă:
- Merge brici pentru: landing page-uri, carduri de pricing, hărți de fundal, butoane cu stare de hover sau chestii decorative unde vrei un efect de "glow" fără efort de procesare.
- E nasol dacă: vrei animații complexe orchestrate în funcție de scroll, reacții la mișcarea cursorului cu fizică de tip spring sau secvențe dependente strict de starea din React. Acolo JS-ul își merită banii.
Un alt detaliu tehnic: background-position declanșează stadiul de Paint în browser. La o suprafață mică sau un div decorativ nu o să simți absolut nicio penalizare, dar dacă pui asta pe un ecran 100vh pe un display 4K, e bine să testezi dacă GPU-ul își face datoria cum trebuie.
Tu mai folosești JS libraries pentru micro-interacțiuni de genul ăsta sau încerci să scoți tot ce poți din CSS nativ?