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%.
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.
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.
Î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.