tigtools

Generator de gradient CSS

Alege culorile și pozițiile, selectează tipul de gradient și copiază codul CSS gata de utilizare.

Rulează în browser Fără înregistrare

Tip
135°
Puncte de culoare
  1. Punct 1
    #0b5d1e
    0%
    100%
  2. Punct 2
    #f2c14e
    100%
    100%
Un gradient aici are între 2 și 6 puncte.

Cum se folosește

  1. Alege între liniar, radial sau conic, apoi setează unghiul sau poziția centrului.
  2. Setează culoarea, opacitatea și poziția fiecărui punct de oprire. Adaugă până la șase puncte de oprire sau elimină-le pe cele de care nu ai nevoie.
  3. Verifică previzualizarea, apoi copiază linia de CSS în foaia de stil.

Cum funcționează

Rezultatul este o declarație standard de fundal CSS. Gradientul liniar se întinde de-a lungul unui unghi: 0deg merge de jos în sus, 90deg de la stânga la dreapta, 180deg de sus în jos. Gradientul radial se extinde dintr-un punct central ca un cerc sau ca o elipsă care se potrivește în casetă. Gradientul conic se rotește în jurul unui punct central, pornind de la unghiul ales, fiind util pentru efecte de tip diagramă circulară și roți de culoare.

Punctele de oprire sunt scrise în ordinea poziției lor, astfel încât poți trage liber pozițiile. Un punct cu opacitate redusă este scris ca rgba(), ceea ce lasă fundalul să se vadă prin el. Două puncte în aceeași poziție creează o margine netă în loc de o tranziție treptată, iar așa se realizează dungile.

Toate cele trei funcții de gradient funcționează în orice browser actual. Culorile din gradient se amestecă implicit în spațiul de culoare sRGB, ceea ce poate arăta ușor gri între culori complementare (de exemplu albastru și galben); adăugarea unui punct de mijloc cu o culoare mai luminoasă evită acest efect.

Exemple

Fundal discret pentru antet

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) oferă o tranziție discretă de sus în jos, care păstrează textul închis la culoare lizibil.

Dungi cu margini clare

Folosește patru puncte de oprire: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Cele două puncte de la 50% se întâlnesc fără amestec, dând două jumătăți solide.

Efect de reflector

Un gradient radial (cerc în stânga sus) de la rgba(255, 255, 255, 0.6) la rgba(255, 255, 255, 0), suprapus peste o culoare, dă o lumină difuză în colț.

Întrebări frecvente

În ce direcție indică 0deg?

În CSS, 0deg indică în sus, deci gradientul începe de jos și se termină sus. 90deg merge de la stânga la dreapta. Aceasta diferă de unele aplicații de design, unde 0° înseamnă de obicei de la stânga la dreapta.

Pot folosi gradientul pe text?

Da: aplică fundalul, apoi adaugă background-clip: text și color: transparent. Verifică dacă textul rămâne lizibil pe pagină în orice punct al gradientului.

Am nevoie de prefixe de browser precum -webkit-linear-gradient?

Nu. Browserele actuale acceptă sintaxa fără prefixe. Prefixele sunt necesare doar pentru browsere foarte vechi.

Confidențialitate

Totul este generat în browser. Culorile și setările nu sunt trimise sau stocate.