Generator de gradient CSS
Proiectați gradiente de fundal CSS fără a memora sintaxa. Comutați între tipurile liniare și radiale, setați un unghi pentru gradienți liniari (grade) și alege două opriri de culoare la 0% și 100%. Previzualizarea se actualizează instantaneu; copiază declarația completă de fundal sau imagine de fundal în foaia de stil. Suportă introducerea culorilor HEX cu validare.
Unghi (°)
Culoare 1
Culoare 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Cum se construiește un gradient
1. Alege gradient liniar sau radial.
2. Pentru liniar, setați unghiul în grade (0 = jos în sus, 90 = stânga la dreapta).
3. Introdu culorile de început și de sfârșit (HEX).
4. Copiază CSS-ul de pe cardul de rezultat în proiectul tău
Exemple de gradient
Banner liniar erou (135 de grade)
Teal #6F9B96 până la piersic #E8C4B8 la 135° — o diagonală comună în anteturile paginilor de destinație. Folosește ca fundal pe o secțiune cu lățime completă.
Reflector radial
Tip radial cu centru deschis și margine întunecată — simulează o vignetă: gradient radial (cerc, #fff 0%, #333 100%).
Decolorare verticală (180 de grade)
Unghi 180 pentru estompare de sus în jos de la culoarea mărcii la alb - util în spatele barelor de navigare.
Când să folosești acest instrument
• Când creați un prototip de fundaluri pentru interfața de utilizare și vrei feedback vizual instantaneu.
• Când uiți dacă unghiul de 90 de grade merge stânga-dreapta sau sus-jos.
• Când ai nevoie de copiere și inserare CSS pentru CodePen, valori arbitrare Tailwind sau transfer de design.
Când să alegi altceva
• Când ai nevoie de mai mult de două opriri de culoare — extindeți manual CSS-ul copiat sau folosești o aplicație de design.
• Când vrei degrade conici (măturare) - nu sunt acceptate aici.
• Când ai nevoie de variante automate în modul întunecat — duplicați și ajustați culorile separat.
Culoarea se oprește în detaliu
O oprire este culoarea plus poziția opțională: #ff0000 0%, #0000ff 50%, #00ff00 100%. Browserul interpolează RGB între opriri. Opririle mijlocii creează apusuri de soare cu benzi sau dungi cu mai multe mărci. Începeți cu două opriri aici, apoi lipește și adăugați o a treia oprire în devtools până când arată corect.
Unghiuri de gradient liniar
CSS măsoară unghiurile în sensul acelor de ceasornic de la „sus” (0°). Acest lucru diferă de clasa de matematică, unde unghiurile încep adesea de la dreapta. Dacă un gradient pare rotit greșit, adăugați sau scădeți 90 de grade. Folosește devtools de editare live alături de acest generator pentru reglaj fin.
Performanță și alternative
Gradientele sunt prietenoase cu GPU pe browserele moderne. Pentru clienții foarte vechi, setați o culoare de fundal solidă de rezervă la culoarea stop mai deschisă înaintea liniei de gradient.
Întrebări frecvente
Care este sintaxa CSS pentru un gradient liniar?
fundal: liniar-gradient(unghi, culoare1 0%, culoare2 100%); Unghiul este în grade; culorile sunt opriri de-a lungul liniei.
Cum funcționează opritoarele de culoare?
Oprește marcajul unde se află fiecare culoare pe linia de gradient. 0% este începutul, 100% sfârșitul. Acest instrument fixează două opriri; adăugați mai multe în editorul tău dacă este necesar.
Linear vs radial?
Amestecuri liniare de-a lungul unei linii drepte. Se amestecă radial spre exterior dintr-un punct central - bun pentru cercuri și puncte moi.
Ce valori ale unghiului sunt comune?
0 grade în sus, 90 grade spre dreapta, 180 grade în jos, 135 grade diagonală - obișnuit pentru cărți și eroi.
Setează fundalul sau imaginea de fundal?
Ieșirea folosește prescurtarea de fundal potrivită pentru majoritatea div-urilor; poți împărți în imagine de fundal dacă suprascrieți alte straturi.
Culorile sunt trimise la un server?
Nu. Previzualizarea se redă local.
Este gratuit?
Da, nu este nevoie de cont.