În curând, foarte curând, site-urile vor fi mai ușor de încărcat și va fi posibil să le faci deloc fără poze.

Deja acum, în browserele moderne, puteți crea un fundal gradient de orice complexitate Ajutor CSS, și în același timp complet fără imagini.

Creați gradienți CSS fără imagini

Să presupunem că vrem să facem o tranziție gradient în fundal de la gri la negru. Pentru a face acest lucru, W3 Corporation a propus în CSS3 să folosească o directivă specială de gradient liniar.

Deci, conform versiunii W3, pentru a face un fundal gradient, este suficient să scrieți în selectorul de bloc:

Fundal: liniar-gradient(start, culoare1 poziție1, culoare2 poziție2,...,culoareN pozițieN);

Și browserul va desena în mod independent fundalul gradient în bloc.

Evident, pot exista multe culori și puncte de control într-un gradient. Parametru start specifică în ce direcție ar trebui să se propage gradientul - poate fi fie top pentru un gradient îndreptat vertical, sau stânga pentru direcția orizontală.

Nu toate browserele acceptă această funcție, așa că există încă o serie de trucuri. Pentru browserele foarte vechi, trebuie fie să specificați o culoare medie de fundal (nu va exista deloc gradient, dar fundalul nu va fi alb), fie să specificați o imagine cu un gradient (deși, dacă scopul utilizării gradientului liniar în CSS este de a reduce numărul de imagini încărcate, atunci acest lucru este inutil, deoarece în toate browserele imaginea va fi încă încărcată, deși ulterior va fi înlocuită cu un gradient liniar).
Pentru browserele similare IE, se pot utiliza gradienți bazați pe filtre, iar pentru browserele webkit (Safari, Chrome) și gecko (Mozilla), ca întotdeauna, există o alternativă: -webkit-gradient și -moz-linear-gradient , care luați parametri similari. Cum ar trebui să funcționeze totul, vedeți următorul bloc de cod:

fundal: #999; filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#ccc), la(#000)); fundal: -moz-linear-gradient(sus, #ccc, #000);

După randare, arată așa.

• Traducere

Lucrând la traducerea proiectului singlediv.com a arătat că unele instrumente CSS au o aplicație mai largă decât credeam. Dar pentru a putea găsi această aplicație, este necesar să înțelegeți clar caracteristicile proprietății. Un exemplu izbitor a fost gradientul liniar, pe care Lynn Fisher l-a folosit cu măiestrie în munca sa.

Vrei să faci un fundal degradat drăguț pe site-ul tău? imagine de fundal: gradient liniar (roșu, albastru); gata! Da, e puțin plictisitor. Așa că dacă mai doriți ceva, vă recomand această pagină de sfaturi css și MDN. Ești aici acum? Apoi, să aruncăm o privire la câteva puncte despre cum funcționează de fapt gradienții liniari. Mai întâi, să ne amintim sintaxa care poate fi utilizată în funcția de gradient liniar:

gradient-liniar([din<угла>| inainte de<стороны-или-угла>]?, );
Funcția primește un prim argument opțional care specifică unghiul gradientului, care poate fi exprimat ca unitate de măsură (grad, rază, grade, revoluție) sau ca un cuvânt cheie (latură sau unghi).

Funcția preia apoi o listă de culori.

caseta de gradient

Imaginea gradient nu are dimensiuni, este infinită spre deosebire de alte imagini de fundal. Dimensiunile vizibile îi sunt date de câmpul gradient, adică. zona în care este afișat.

De obicei, atunci când utilizați imagine de fundal ca un gradient liniar pentru elementul DOM, acea zonă este caseta de margini a elementului (care este aceeași zonă în care este afișată culoarea de fundal).

Cu toate acestea, dacă utilizați și proprietatea CSS background-size și o setați la, de exemplu, 200px * 200px, atunci caseta de gradient va avea această dimensiune și va fi, implicit, plasată în colțul din stânga sus al elementului DOM, cu excepția cazului în care setați, de asemenea, poziția de fundal (poziția de fundal).

Deci, pe măsură ce citiți următoarele secțiuni, amintiți-vă că caseta cu gradient nu este întotdeauna poziționată și dimensionată la fel ca elementul DOM la care aplicați gradientul.

linie de gradient

În caseta de gradient, linia care trece prin centru și de-a lungul căreia sunt distribuite culorile se numește linie de gradient. Această linie poate fi descrisă mai simplu în timpul explicării unghiului gradientului, deci mai multe despre asta în secțiunea următoare.

unghi de gradient

Destul de evident, unghiul unui gradient liniar este folosit pentru a determina direcția pe care o va lua gradientul. Dar să ne uităm la acest aspect mai detaliat.

Dacă C este punctul central al câmpului de gradient, atunci A este unghiul dintre linia verticală prin C și linia de gradient, care trece și ea prin C, de-a lungul căruia sunt distribuite culorile de oprire ale gradientului.

Acest unghi poate fi determinat în două moduri:

Folosind unul dintre cuvintele cheie: sus (sus), jos (jos), la stânga (stânga), la dreapta (dreapta), la sus în dreapta(dreapta sus), stânga sus (stânga sus), dreapta jos (dreapta jos), stânga jos (stânga jos);
Sau prin definirea unui unghi cu un număr și unitate de măsură, cum ar fi 45deg (45 grade), 1turn (1 turn);

Dacă unghiul nu este specificat, atunci în mod implicit scade (adică este de 180 de grade sau 0,5 spire):

În aceasta și în următoarele imagini, caseta cu gradient este delimitată de un dreptunghi, iar linia cu gradient este o linie groasă de culoare gri care trece prin centru, de-a lungul căreia apar culorile.

În exemplul de mai sus, unghiul nu este specificat, așa că gradientul alb spre roșu se deplasează de sus în jos, ceea ce corespunde cuvântului cheie în jos, după cum se arată mai jos:

Și, așa cum se arată în următoarele 2 imagini, to top (în sus) corespunde unui unghi de zero grade:

Încă una punct important, ceea ce merită luat în considerare atunci când utilizați cuvinte cheie unghi - ce să-i în dreapta sus, de exemplu, (sau orice alt cuvânt cheie unghi) depinde de dimensiunile casetei cu gradient.

Logica este că, dacă doriți să faceți un gradient de la roșu la albastru spre colțul din dreapta sus al unui element, atunci acel element ar trebui să fie exact albastru în colțul din dreapta sus, iar culoarea violet din mijlocul gradientului ar trebui să se formeze în jur. linia care se extinde din colțul din stânga sus până la colțul din dreapta jos. Iată cum arată în imagine:

Prin urmare, în dreapta sus nu înseamnă că linia de gradient trece prin colțul din dreapta sus și nici măcar nu înseamnă că unghiul de gradient este de 45 de grade!

Să vedem cum se mișcă linia de gradient pe măsură ce unghiul se schimbă cu următoarea animație:

În această animație, unghiul se înclină de la 0 la 360 de grade în trepte de 10 grade. Rezoluția scăzută a GIF-ului face chiar mai ușor să vedeți cum diferite culori sunt redate ca „linii” care sunt întotdeauna perpendiculare pe linia de gradient.

Să recapitulăm ceea ce știm despre colțurile de gradient:

Unghiul este măsurat între linia de gradient și linia care începe din centrul casetei de gradient și se mișcă în sus.
Deci 0 grade înseamnă sus.
Valoarea implicită a unghiului, dacă nu este specificată, este în jos, care este de 180 de grade.
Cuvintele cheie unghi depind de dimensiunile casetei cu gradient.

Lungimea liniei de gradient

Înainte de a putea vedea cum sunt distribuite culorile de-a lungul liniei de gradient, trebuie să explicăm un punct. Poate ați observat în animația anterioară că culorile sunt uneori plasate în afara casetei de gradient, ceea ce poate părea puțin ciudat la prima vedere, dar are sens dacă știți motivul.

Uită-te la un exemplu:

Avem nevoie de un gradient roșu spre albastru cu un unghi de 45 de grade și, din cauza raportului de aspect al casetei de gradient, linia de gradient nu poate trece prin colțul din dreapta sus.

Dar browserul dorește (adică specificațiile îl forțează) să facă colțul din dreapta sus de culoare albastru pur. Dacă am face ca linia de gradient să înceapă și să se termine la marginile câmpului, atunci culoarea albastră ar ocupa cea mai mare parte a câmpului, iar gradientul nu ar fi atât de neclar.

Deci, pentru a face acest lucru, linia de gradient uneori trebuie să iasă în afara casetei de gradient. Este destul de ușor să știi unde începe și unde se termină. Pur și simplu trageți o linie care trece prin colțul cel mai apropiat și este perpendiculară pe linia de gradient. Punctul în care această linie intersectează linia de gradient este punctul de început/sfârșit.

De fapt, dacă specificați lățimea casetei de gradient W, înălțimea H și unghiul gradientului, atunci lungimea liniei de gradient este:

Abs(W * sin(A)) + abs(H * cos(A))

Culori

Culorile sunt o listă separată prin virgulă în care fiecare element poate fi definit după cum urmează:
<цвет> [<процентное соотношение> | <длина>]?

Prin urmare, nu este necesar să specificați unde trebuie plasate culorile pe linia de gradient. De exemplu:

Niciuna dintre culori nu are propria poziție, așa că browserul însuși le-a determinat pozițiile.

De fapt exemplu simplu Cu doar 2 culori, culoarea 1 va fi plasată la 0% (la începutul liniei de gradient) și culoarea 2 la 100% (la sfârșitul liniei de gradient).

Apoi, dacă adăugați o a treia culoare, veți avea în continuare culoarea 1 la 0%, culoarea 2 la 50% și culoarea 3 la 100% și așa mai departe.

În exemplul de mai sus, au fost specificate 5 culori stop, iar browserul a calculat pozițiile lor relative ca 0%, 25%, 50%, 75%, 100%. Motivul pentru aceasta este distribuția uniformă de-a lungul câmpului de gradient.

Poziția culorii poate fi exprimată fie ca procent (față de dimensiunea liniei de gradient), fie ca lungime CSS (unde este validă orice unitate) Dimensiuni CSS).

Iată un exemplu:

După cum puteți vedea, fiecare dintre cele 5 culori stop are propria poziție, dată în pixeli. Aceste poziții sunt calculate de la începutul liniei de gradient.

Folosind astfel de poziții, puteți obține câteva efecte interesante. De exemplu, puteți folosi un gradient pentru a nu desena un gradient în sine, ci pentru a lăsa câteva culori:

Există 7 culori în imaginea de mai sus și sunt setate astfel încât următoarea culoare să înceapă exact în aceeași poziție cu ultima, ceea ce înseamnă că browserul nu trebuie să umple spațiul dintre cele două culori oprite cu un gradient.

Sigur, totul este drăguț și distractiv, dar ce se întâmplă dacă amesteci culorile poziționate cu cele nepoziționate? Apoi faci ca browserul să funcționeze mai greu și îi ceri să distribuie automat culorile pentru care nu ai specificat o poziție:

În acest exemplu simplu, a doua culoare (portocalie) nu are nicio poziție, așa că browser-ul o determină și găsește un loc potrivit între culoarea setată anterior și următoarea. Acest lucru este foarte simplu aici, deoarece vecinii imediati ai celei de-a doua culori au propria poziție, dar dacă doar unele culori au poziții, sau dacă culorile anterioare sau următoare nu au poziție, lucrurile se complică.

Să ne uităm la câteva exemple:

În exemplul de mai sus, doar a treia culoare (galben) este poziționată la 30%. Deci, pentru a distribui mai bine pe toate celelalte, prima este plasată la 0%, ultima la 100%, iar restul culorilor sunt distribuite între ele (astfel încât portocaliul ajunge direct între 0% și 30%, iar roșu între 30% și 100%).

În exemplul de mai sus, sunt poziționate prima și ultima culoare, astfel încât restul sunt distribuite uniform între cele două.

Desigur, ar fi prea ușor dacă 0% și 100% ar fi limite dure care nu pot fi depășite. Dar, după cum puteți vedea din exemplul anterior, ultima culoare este situată la 120% și, prin urmare, toate celelalte culori ar trebui distribuite în mod corespunzător în raport cu această poziție (punctul de pornire implicit în acest caz rămâne 0%).

Și dacă doriți să faceți browserul dvs. să funcționeze și mai mult, de ce să nu specificați ordinea poziției?

De fapt, culorile ar trebui să fie în ordine, dar nimic nu vă interzice să nu faceți acest lucru și nimic groaznic nu se va întâmpla dacă nu o faceți. Browserul dvs. va rezolva totul așa cum se arată mai jos:

Să începem cu prima culoare (roșu) situată la 30%. În plus, a doua culoare este situată la 10%, ceea ce este deja incorect, deoarece, așa cum sa menționat mai sus, culorile ar trebui să fie indicate în poziție ascendentă. Deci aici browserul corectează poziția celei de-a doua culori și o setează în aceeași poziție cu culoarea anterioară (30%). Urmează a treia culoare (galben) situată la 60%, ceea ce este corect, dar urmată de a patra (albastru) la 40%. Din nou, poziția este ajustată și setată la aceeași valoare ca și culoarea poziționată anterior.

În cele din urmă, după cum se arată în exemplul de mai sus, ultima culoare (albastru) este poziționată incorect și browserul o face în aceeași poziție ca și culoarea anterioară, care în acest caz nu este nici vecina sa imediată (galben), nici vecina culorii, care este este în fața lui (portocaliu), așa că ar trebui să revină la prima culoare (roșu). Astfel, toate culorile dintre roșu și albastru sunt setate la 30% și, prin urmare, sunt invizibile.

Instrumente

Toate capturile de ecran din acest articol sunt dintr-un instrument simplu pe care l-am făcut pe codepen, care vă permite să introduceți o funcție de gradient liniar și să vedeți caseta de gradient, linia de gradient, unghiul și informațiile de culoare deasupra elementului.

Instrumentul are tot felul de erori și limitări (vezi comentariile javascript), așa că nu vă așteptați la prea multe de la el.

Etichete:

• css
• gradient liniar

Adaugă etichete

Când vorbim despre gradienți în CSS, vorbim despre gradiente de culoare.

Există două tipuri de gradienți în CSS:

• liniar: culorile merg dintr-un punct în altul, conform Drept linii;
• radial: culorile merg de la centrul cercului la marginile acestuia, în timpul toate directii.

Se ia în considerare gradientul imagine de fundalși trebuie utilizat cu proprietatea corespunzătoare.

gradient liniar

Sintaxa pentru gradienții liniari este destul de complexă, dar ideea de bază este următoarea:

• definiți doritul culorile;
• unde ar trebui să apară aceste culori de-a lungul axei(la început, mijloc, sfârșit etc.);
• in care direcţie ar trebui să existe un gradient.

Să începem cu un gradient simplu de două culori:

Div ( imagine de fundal: gradient liniar (roșu, albastru); )

Mod implicit:

• direcție verticală, de sus în jos;
• primul colorează în din timp(sus);
• al doilea colorează în Sfârșit(în partea de jos).

Schimbare de direcție

Dacă direcția de sus în jos nu ți se potrivește, o poți schimba la una dintre opțiuni:

• defini atribuirea gradientului, cu cuvinte cheie precum la stânga sus ;
• defini un specific injecţieîn grade, ca 45 de grade.

Această direcție trebuie stabilită față culoare:

Div (imagine de fundal: gradient liniar (în dreapta jos, galben, violet); lățime: 200px; )

Daca vrei sa intrebi unghi specific, apoi puteți folosi valoarea în grade:

• 0deg - de jos în sus;
• 20deg - ușor diagonal mergând în sensul acelor de ceasornic;
• 90deg - ca la ora 15, de la stânga la dreapta;
• 180deg este implicit, de sus în jos.

Div ( imagine de fundal: gradient liniar (20 de grade, verde, albastru); lățime: 150 px; )

Adăugând mai multe culori

Puteți introduce câte culori doriți. Ei vor distribuite uniform de-a lungul axei:

• doua culori: 0% și 100%
• trei culori: 0%, 50% și 100%
• patru culori: 0%, 33%, 67% și 100%

Div ( imagine de fundal: gradient liniar (portocaliu, gri, galben); lățime: 150 px; )

Determinarea punctelor de culoare specifice

Dacă nu doriți ca culoarea să fie distribuită uniform, puteți seta poziții specifice de culoare, folosind fie procente (%), fie pixeli (px):

Div ( imagine de fundal: gradient liniar (portocaliu, gri 10%, galben 50%); lățime: 150px; )

În aceste setări:

• culoarea portocalie nu are setată o poziție de culoare, deci valoarea implicită este 0%;
• culoarea gri este mai aproape de vârf, cu 10% în loc de 50%;
• galbenul ocupă jumătate din gradient, de la 50% până la sfârșitul 100%.

gradient radial

În timp ce gradienții liniari rulează de-a lungul unei singure axe, gradienti radiali răspândit în toate direcțiile. Sintaxa lor este foarte asemănătoare cu gradienții liniari, deoarece ambele au puncte de culoare. Dar în loc să specificați o direcție, trebuie să specificați:

• formă: cerc sau elipsă;
• punct de start: care va fi centrul cercului sau elipsei;
• punctul final: unde va fi marginea cercului sau elipsei.

Div (imagine de fundal: gradient radial (roșu, galben); umplutură: 1rem; lățime: 300px; )

Mod implicit:

• gradientul este elipsă;
• prima culoare începe la centru;
• ultima culoare se termină la colțul cel mai îndepărtat.

Poziția de pornire

Poziția de pornire funcționează ca poziție de fundal. Îl puteți seta cu cuvântul cheie at.

Div ( imagine de fundal: gradient radial (în dreapta sus, negru, gri deschis); umplutură: 1 rem; lățime: 300 px; )

Poziția finală

În mod implicit, formularul se termină la colțul cel mai îndepărtat. Tu poti alege:

• partea cea mai apropiată
• cel mai apropiat colț
• partea cea mai îndepărtată
• cel mai îndepărtat-colț

Div ( imagine de fundal: radial-gradient (cel mai apropiat colț la 20px 20px, verde, albastru); padding: 1rem; lățime: 300px; ) div:hover ( imagine de fundal: radial-gradient (partea cea mai îndepărtată la 20px 20px, verde albastru); )

marime fixa

În loc să setați pozițiile de început și de sfârșit, puteți seta pur și simplu dimensiuni specifice:

Div ( imagine de fundal: gradient radial (20px 10px la 75% 50%, violet închis, roz); umplutură: 1rem; lățime: 300px; )

Gradienții în CSS sunt puternici, cu un număr infinit de opțiuni.

Gradient - umplerea zonei selectate cu o secvență de nuanțe de culoare cu tranziții netede între ele. Un gradient este utilizat pentru a afișa o tranziție lină între două sau mai multe nuanțe de culoare specificate. Exemplu de gradient:

Anterior, imaginile de fundal erau folosite pentru a crea efectul de gradient. Acum puteți folosi CSS3 pentru a crea un fundal gradient. Elementele cu gradienți CSS3 arată mai bine atunci când sunt mărite decât omologii lor cu imagini de fundal conectabile, deoarece gradientul este generat de browser direct sub zona specificată.

Rețineți că gradientul CSS este o imagine de fundal generată de browser, nu o culoare de fundal, deci este definită ca valoare a proprietății imagine de fundal. Aceasta înseamnă că gradientul poate fi specificat nu numai ca valoare a proprietății imagine de fundal, ci și oriunde poate fi inserată o imagine de fundal, cum ar fi list-style-image și background .

CSS3 definește două tipuri de gradienți:

• gradient liniar(Gradient liniar) - tranziție lină de la culoare la culoare într-o linie dreaptă.
• gradient radial(Gradient radial) - tranziție lină de la culoare la culoare dintr-un punct în toate direcțiile.

gradient liniar

Un gradient liniar se întinde într-o linie dreaptă, arătând o tranziție lină de la o nuanță de culoare la alta. Un gradient liniar este creat folosind funcția linear-gradient(). Funcția creează o imagine care este un gradient liniar între nuanțele specificate de culori. Dimensiunea gradientului corespunde cu dimensiunea elementului la care este aplicat.

Funcția linear-gradient() preia următoarele argumente separate prin virgulă:

• Primul argument este gradul unghiului sau cuvintelor cheie care definesc unghiul direcției liniei de gradient. Argument opțional.
• O listă separată prin virgulă de două sau mai multe culori, fiecare dintre acestea putând fi urmată de o poziție de oprire.

Cel mai simplu gradient liniar necesită doar două argumente care specifică culorile de început și de sfârșit:

Div ( imagine de fundal: gradient liniar (negru, alb); lățime: 200 px; înălțime: 200 px; ) Încercați »

Dacă treceți două argumente funcției, se stabilește un gradient vertical cu punctul de plecare în partea de sus.

Direcția liniei de gradient poate fi definită în două moduri:

Utilizarea grade Ca prim argument, puteți trece gradul colțului liniei de gradient, care determină direcția gradientului, de exemplu, unghiul 0deg (grade este prescurtarea de la engleză grad - grad) definește linia de gradient din marginea de jos a elementului spre sus, unghiul de 90 de grade definește linia de gradient de la stânga la dreapta și etc. Mai simplu spus, unghiurile pozitive reprezintă o rotație în sensul acelor de ceasornic, respectiv negativ în sens invers acelor de ceasornic. Utilizarea cuvintelor cheie Cuvintele cheie „în sus”, „la dreapta”, „în jos” sau „la stânga” pot fi de asemenea trecute ca prim argument, ele reprezintă unghiurile liniilor de gradient „0deg” „90deg” „180deg” „ 270 de grade", respectiv.

Unghiul poate fi setat și folosind două cuvinte cheie, de exemplu, în dreapta sus - linia de gradient este îndreptată spre colțul din dreapta sus.

Un exemplu de gradient dat în diferite direcții:

Div ( marjă: 10 px; lățime: 200 px; înălțime: 200 px; float: stânga; ) # one ( imagine de fundal: gradient liniar (la stânga, negru, roșu); ) # doi ( imagine de fundal: gradient liniar( în stânga sus, negru, roșu); ) #trei ( imagine de fundal: gradient liniar (65 de grade, negru, galben); ) Încercați »

După cum sa menționat deja, un gradient liniar poate include o listă separată prin virgulă de mai mult de două culori, browserul le va distribui uniform pe întreaga zonă disponibilă:

Div ( marjă: 10 px; lățime: 200 px; înălțime: 200 px; float: stânga; ) # one ( imagine de fundal: gradient liniar (la dreapta, roșu, albastru, galben); ) # doi ( imagine de fundal: liniar- gradient (în stânga sus, albastru, alb, albastru); ) Încercați »

După culoare, este permisă specificarea unei poziții de oprire pentru aceasta, care determină locația culorii (unde o culoare începe să treacă în alta) în raport cu punctele de început și de sfârșit ale gradientului. Poziția de oprire este specificată folosind unități acceptate în CSS sau folosind procente. Când se utilizează procente, locația poziției opririi este calculată în funcție de lungimea liniei de gradient. O valoare de 0% este punctul de pornire al gradientului, 100% este punctul final.

Div (marja: 10px; lățime: 200px; înălțime: 200px; float: stânga; ) #unu (imagine de fundal: gradient liniar (în dreapta sus, albastru, alb 70%, albastru); ) #două (imagine de fundal: : gradient liniar (în dreapta jos, galben 10%, alb, roșu, negru 90%);) #trei ( imagine de fundal: gradient liniar (în dreapta, negru 10%, galben, negru 90%); ) Încercați »

Valoarea culorii poate fi specificată căi diferite, de exemplu: specificați un nume de culoare, utilizați valori hexazecimale (HEX), folosind sintaxa RGB (RGBA) sau HSL (HSLA). De exemplu, utilizarea unui gradient cu transparență poate fi folosită în combinație cu o culoare de fundal sau o imagine sub gradient pentru a crea efecte vizuale interesante:

Div ( margine: 10px; lățime: 300px; înălțime: 100px; fundal-culoare: verde; ) #one ( fundal: liniar-gradient(la stânga, rgb(255,255,0), rgba(255,255,0,0)); ) #două ( fundal: gradient liniar(rgb(255,255,255), rgba(255,255,255,0)); )

Gradientul de culoare este o tranziție lină de la unul culoarea dată la alta prin culori intermediare. Într-un gradient liniar, tranziția are loc în linie dreaptă, dintr-un punct A până la punctul B. Gradientul poate avea mai mult de două puncte de ancorare - apoi se face tranziția din punct A până la punctul B, apoi de la punct B până la punctul C etc.

Cum să faci un gradient liniar de fundal în CSS

În CSS3, puteți adăuga fundaluri gradiente elementelor prin binecunoscuta proprietate imagine de fundal. Valoarea este cuvântul cheie linear-gradient(), unde trebuie să specificați punctul de pornire al gradientului, culoarea de început și culoarea finală în paranteze.

De exemplu, să facem un gradient liniar de fundal de la violet la roșu. Făcând acest lucru, vrem să fie punctul de plecare cu violet partea dreapta, iar vectorul gradient se îndrepta spre stânga. Să scriem codul:

Imagine de fundal: gradient liniar (la stânga, violet, roșu); Degradat de fundal pe bloc