Generator Gradient CSS

Ce sunt gradientele CSS?

Gradientele CSS creează tranziții lise și continue între două sau mai multe culori fără a folosi imagini. Sunt randate nativ de browser, ceea ce înseamnă că se scalează la orice rezoluție, se încarcă instant și nu produc nicio cerere HTTP. Gradientele sunt unul dintre cele mai puternice instrumente din CSS-ul modern pentru crearea de funduri, butoane și elemente decorative bogate vizual.

Există două tipuri principale de gradiente CSS: gradientele liniare care fac tranziția de-a lungul unei linii drepte și gradientele radiale care iradiază spre exterior dintr-un punct central. Un al treilea tip, gradientele conice, se rotesc în jurul unui punct central precum o roată de culori. Acest instrument se concentrează pe gradientele liniare și radiale, care acoperă marea majoritate a nevoilor de design.

Sintaxa gradientelor CSS

Funcția linear-gradient() primește o direcție (unghi sau cuvânt cheie) urmată de puncte de culoare. Sintaxa de bază este background: linear-gradient(unghi, culoare1 poziție1, culoare2 poziție2). Unghiul este în grade — 0deg merge de jos în sus, 90deg de la stânga la dreapta, iar 180deg de sus în jos. Puteți adăuga oricâte puncte de culoare doriți.

Gradientele radiale folosesc radial-gradient(formă dimensiune la poziție, culoare1, culoare2). Forma poate fi cerc sau elipsă. Cuvintele cheie pentru dimensiune (closest-side, farthest-corner etc.) controlează cât de departe se extinde gradientul. Dacă sunt omise, browserul folosește valorile implicite care arată de obicei corect.

Cum se folosește acest instrument

Alegeți culorile folosind selectoarele de culoare, ajustați unghiul gradientului cu glisorul sau introducând o valoare în grade și adăugați sau eliminați puncte de culoare după nevoie. Instrumentul generează codul CSS în timp real. Faceți clic pe butonul de copiere pentru a copia regula CSS completă în clipboard, apoi lipiți-o în foaia de stil.

Sfaturi de design pentru gradiente

Gradientele subtile arată mai profesional decât cele dramatice. O schimbare de 10–20 de grade în nuanță între două culori înrudite creează un aspect elegant și modern. Evitați combinarea a mai mult de trei culori dacă nu intenționați să creați un efect curcubeu. Zonele mari beneficiază de gradiente lise, în timp ce elementele UI mici, cum ar fi butoanele, pot suporta tranziții mai îndrăznețe.

Pentru design-urile în modul întunecat, suprapunerile de gradient pe funduri întunecate adaugă profunzime fără a fi deranjante. Folosiți puncte de culoare semitransparente (rgba sau hsla) pentru a crea efecte similare sticlei. Suprapuneți mai multe gradiente folosind virgule în proprietatea background pentru compoziții complexe.

Considerații de performanță

Gradientele CSS sunt accelerate prin GPU și extrem de performante — mult mai bune decât încărcarea imaginilor cu gradient. Totuși, gradientele foarte complexe cu multe puncte de culoare pot cauza diferențe minore de randare între browsere. Testați întotdeauna gradientele în Chrome, Firefox și Safari. Browserele moderne acceptă gradientele fără prefixe de furnizor, deci -webkit-linear-gradient nu mai este necesar.

Întrebări frecvente

Pot anima gradiente CSS?

CSS nu poate anima direct valorile gradientului folosind tranziții. Totuși, puteți anima background-position al unui gradient supradimensionat, folosi @property pentru a anima proprietăți personalizate în interiorul gradientelor sau estompa între două gradiente folosind opacity pe pseudo-elemente.

Care este diferența dintre gradientele liniare și cele radiale?

Un gradient liniar face tranziția culorilor de-a lungul unei linii drepte la un unghi specificat. Un gradient radial face tranziția spre exterior dintr-un punct central în formă circulară sau eliptică. Alegeți liniar pentru funduri și bannere și radial pentru efecte de reflector sau evidențierea butoanelor.