Generator de gradient

Cu Generator de gradient, designerii și dezvoltatorii front-end pot să ajusteze o interfață înainte de implementare. Creează un gradient liniar CSS.

Creează un gradient liniar CSS. Îl poți folosi gratuit în browser fără cont, apoi poți verifica rezultatul înainte de pasul următor.

Cum se folosește

Introdu mai întâi unghiul gradientului în grade; acesta decide în ce direcție se deplasează culorile peste element.
Adaugă culoarea de început pe linia următoare și culoarea de sfârșit dedesubt.
Generează gradientul: zona de rezultat afișează o linie de CSS pe care o poți copia direct în proiectul tău.
Lipește acea linie în regula la care lucrezi, apoi reîncarcă pagina pentru a vedea cum arată de fapt.
Schimbă unghiul sau o culoare și generează din nou de câte ori vrei înainte de a te hotărî asupra stilului final.

Exemplu

Eșantionul folosește un unghi de 45 de grade, cu un albastru foarte închis la început și un verde puternic la sfârșit. După generare, compară linia obținută cu ce aveai în minte: unghiul stabilește direcția, iar ordinea culorilor decide nuanța la fiecare capăt.

Date de intrare

45
#0F172A
#16A34A

Rezultat

background: linear-gradient(45deg, #0F172A, #16A34A);

Limite și formate

Sunt produse doar gradiente liniare; variantele radiale, conice și repetate au nevoie de altă sintaxă.
Două culori dau o tranziție simplă, dar opriurile intermediare nu pot fi ajustate de pe această pagină.
Rezultatul depinde de ecranul și browserul vizitatorului, iar o tranziție foarte contrastantă poate obosi ochiul când textul stă deasupra.
Verifică contrastul dacă așezi text peste gradient, pentru că lizibilitatea nu poate fi judecată doar din cod.

Unde are loc procesarea

Gradientul este generat în browserul tău. Unghiul și ambele culori rămân pe dispozitivul tău, nimic nu este transmis și nimic nu este păstrat după ce părăsești pagina, așa că fragmentul pe care îl copiezi este construit în întregime pe propria mașină.

Întrebări frecvente

Pot reutiliza codul generat într-o altă regulă?

Da. Linia respectă sintaxa standard pentru un gradient liniar și se potrivește în orice declarație de fundal. Copiaz-o așa cum este și schimbă doar culorile dacă paleta ta se schimbă mai târziu.

Cum obțin un gradient care merge de sus în jos?

Modifică unghiul în pași mici și păstrează valoarea care pune prima culoare în partea de sus a elementului. Deoarece rezultatul este verificat prin reîncărcarea paginii, una sau două încercări sunt de obicei suficiente pentru a ajunge la direcția dorită.

Pot folosi mai mult de două culori?

Această pagină pornește de la o culoare de început și una de sfârșit, așa că o tranziție cu trei tonuri nu poate fi configurată aici direct. Poți genera totuși o primă pereche și apoi adăuga opriurile suplimentare manual în propria foaie de stil.