Generator de gradient CSS

Cum folosești generatorul de gradient CSS

1. Alege un Tipul gradientului: Liniar, Radial sau Conic. Previzualizarea mare de sus se actualizează la fiecare modificare.
2. Pentru un gradient liniar, setează Unghi cu cursorul sau scrie-l în grade (90° merge de la stânga la dreapta, 180° de sus în jos). Pentru un gradient conic, unghiul este punctul de unde pornește rotirea.
3. Pentru gradientele radiale și conice, mută centrul cu Centru X și Centru Y. Un gradient radial poate fi Cerc sau Elipsă (meniul Formă).
4. Editează Opriri de culoare. Apasă oriunde pe bară ca să adaugi acolo o oprire, cu culoarea pe care gradientul o are deja în acel punct, sau folosește Adaugă oprire ca să umpli cel mai mare gol. Trage un mâner ca să îl muți. Fiecare oprire are și un rând în care poți alege culoarea, scrie orice culoare CSS, seta Poziție (%) sau o poți Elimină (un gradient păstrează cel puțin două opriri).
5. Opțional, bifează Repetitiv, alege Interpolarea culorilor, apasă Inversează ca să răstorni opririle sau Gradient aleatoriu pentru inspirație.
6. Copiază rezultatul din Cod CSS cu butonul Copiază.

Tastatură: selectează un mâner de pe bară, apoi folosește tastele săgeți ca să îl muți cu 1 % (10 % cu Shift), Home și End ca să sari la capete și Delete ca să îl elimini.

Cele trei funcții de gradient

• linear-gradient() amestecă culorile de-a lungul unei linii drepte. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) merge de la indigo în stânga la roz în dreapta. Unghiurile se măsoară în sens orar de sus: 0deg arată în sus, 90deg spre dreapta.
• radial-gradient() radiază dintr-un punct central. radial-gradient(circle at 30% 40%, …) pune centrul la 30 % de la stânga și 40 % de sus. O elipsă se întinde odată cu caseta, un cerc rămâne rotund.
• conic-gradient() se rotește în jurul unui centru ca acele unui ceas. conic-gradient(from 0deg at 50% 50%, …) produce cercuri cromatice, diagrame circulare și efecte de tip spinner. Pozițiile opririlor sunt fracțiuni dintr-o rotație completă.

Opțiunea Repetitiv folosește repeating-linear-gradient() și funcțiile înrudite: modelul definit de opririle tale se repetă până umple caseta. Pune ultima oprire mult sub 100 % (de exemplu 20 %) ca să vezi dungi sau inele.

Două opriri la aceeași poziție creează o margine dură în loc de o trecere fluidă, așa se fac dungile și steagurile. Generatorul păstrează opririle sortate după poziție în cod, așa cum cere CSS.

Interpolare sRGB sau OKLCH

Implicit, browserele amestecă culorile gradientului în sRGB. Între două culori saturate, precum albastru și galben, aceasta creează adesea un mijloc cenușiu și tulbure. CSS Color Level 4 îți permite să alegi spațiul de interpolare: linear-gradient(90deg in oklch, …) amestecă în spațiul perceptual OKLCH și păstrează mijlocul vibrant.

Cu OKLCH (mai fluid, cu rezervă sRGB), instrumentul scrie două declarații background: întâi versiunea clasică sRGB, apoi cea OKLCH. Browserele care acceptă spații de interpolare (Chrome și Edge 111+, Safari 16.2+, Firefox 127+) folosesc a doua linie; cele mai vechi o ignoră și o păstrează pe prima.

Sfaturi

• Culorile cu transparență sunt acceptate în câmpurile opririlor, de exemplu #00000080 sau rgb(0 0 0 / 50%), ceea ce e util pentru suprapuneri peste imagini.
• Codul este scris cu background. Folosește background-image dacă setezi separat alte proprietăți de fundal.
• Gradientele discrete (două tonuri apropiate ale aceleiași culori) arată de obicei mai profesionist decât amestecurile curcubeu.