Generator de gradient CSS

Ce este acest instrument?

Gradienții CSS sunt imagini generate de browser dintr-o listă de culori, nu fișiere pe care le încarci — linear-gradient() tranziționează culorile de-a lungul unei linii drepte la un unghi dat, în timp ce radial-gradient() tranziționează culorile spre exterior dintr-un punct central. Ambele acceptă două sau mai multe puncte de culoare, fiecare fixat opțional la o poziție de-a lungul gradientului.

Scriși manual, gradienții sunt ușor de greșit subtil: ordinea punctelor, procente lipsă sau o valoare de unghi în direcția greșită (unghiurile CSS merg în sensul acelor de ceasornic de la 'to top', spre deosebire de unghiurile matematice). Acest instrument ține sintaxa la distanță — setează culori și poziții cu selectoare și sliders, urmărește caseta de previzualizare actualizându-se în timp real, și copiază CSS-ul rezultat odată ce arată bine.

Sursă: CSS Images Module Level 3, W3C — specificația care definește sintaxa linear-gradient() și radial-gradient().

De ce să-l folosești?

• Previzualizarea live se actualizează instant la fiecare schimbare de culoare, poziție și unghi — nu e nevoie să reîncarci o pagină pentru a vedea rezultatul.
• Comută între gradienți liniari și radiali dintr-un clic; controlul unghiului se ascunde automat pentru gradienții radiali, unde nu se aplică.
• Adaugă sau elimină puncte de culoare (2 până la 4), în loc să fii limitat la un gradient fix cu două culori.
• Fiecare punct are propriul slider de poziție, deci punctele nu trebuie să fie spațiate uniform.
• Generează CSS gata de lipit, folosind sintaxa standard linear-gradient()/radial-gradient().
• Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri. Gratuit, fără înregistrare, funcționează pe mobil.

Cum se folosește

1. Alege Liniar sau Radial ca tip de gradient.
2. Pentru un gradient liniar, trage sliderul de unghi — 90deg merge de la stânga la dreapta, 180deg de sus în jos, și așa mai departe.
3. Setează culoarea și poziția pentru fiecare punct; primul punct este culoarea de start a gradientului, ultimul este culoarea de final.
4. Apasă '+ Adaugă punct' pentru a adăuga până la 4 puncte în total, pentru un gradient multicolor, sau butonul ✕ pentru a elimina unul (minimum 2).
5. Copiază CSS-ul generat și lipește-l într-o declarație background sau background-image.

Exemplu

Intrare

Liniar · Unghi: 90deg · Puncte: #f97316 la 0%, #ec4899 la 100%

Rezultat

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Un gradient de la portocaliu la roz, de la stânga la dreapta — un stil comun pentru butoane, bannere și fundaluri hero.

Gradienți liniari vs. radiali

Un gradient liniar tranziționează culoarea de-a lungul unei linii drepte, controlat de un unghi — util pentru bannere, butoane și fundaluri direcționale. Un gradient radial tranziționează culoarea spre exterior dintr-un punct central, în inele care se extind, ceea ce se potrivește pentru efecte de tip reflector, insigne sau fundaluri cu strălucire. Acest instrument setează implicit gradientul radial la o formă de cerc, centrat în casetă, ceea ce acoperă cel mai comun caz de utilizare radială; CSS suportă și forme de elipsă și poziții descentrate, dacă ai nevoie să editezi manual rezultatul în continuare.

Modele comune de gradient

• Accent subtil de brand: două nuanțe apropiate (de exemplu două tonuri ale aceleiași culori) la un unghi mic, pentru un fundal difuz și moale.
• Buton CTA cu contrast ridicat: două culori saturate, complementare, la 90deg sau 135deg pentru un aspect îndrăzneț, clicabil.
• Suprapunere pe o imagine: un gradient de la transparent la o culoare solidă (setează opacitatea printr-o culoare rgba în hex-ul de bază al selectorului, sau ajustează după copiere), stratificat peste o background-image.
• Gradient curcubeu/brand cu mai multe puncte: 3–4 puncte spațiate pe întregul interval 0–100%, pentru tranziții mai fluide, mai treptate decât permite un gradient cu două culori.
• Reflector radial: un punct central luminos aproape de 0%, care se estompează spre un punct de margine mai închis aproape de 100%, util pentru secțiuni hero sau evidențieri de card.

Combinarea cu alte instrumente CSS

Gradienții sunt adesea combinați cu colțuri rotunjite și umbre pe același element — un card cu gradient, o umbră moale și colțuri rotunjite este un model comun de interfață. Generează fiecare piesă separat și combină declarațiile CSS pe element.

→ Generator Box Shadow · Generator Border Radius · Selector de culoare

Întrebări frecvente