Generator Gradient CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
De ce să folosiți un generator vizual de gradient?
Scrierea manuală a gradientelor CSS este greoi. Generatorul nostru vizual vă permite să controlați opririle de culoare cu un selector de culori și glisorul de poziție cu actualizare în timp real.
3 tipuri de gradient
Gradient liniar, radial și conic — cu controale dedicate pentru fiecare tip
Gradiente multicolor
Adăugați opriri de culoare nelimitate și trageți pozițiile pentru gradiente complexe
Previzualizare în timp real
Vedeți randarea gradientului în timp real când ajustați culorile, pozițiile și unghiul
Creați un gradient CSS în 3 pași
Alegeți tipul de gradient
Selectați gradient liniar, radial sau conic și ajustați unghiul sau direcția
Ajustați opririle de culoare
Setați culoarea fiecărei opriri cu selectorul de culori și poziționați cu glisorele
Copiați CSS-ul
Faceți clic pe 'Copiați CSS' pentru a obține proprietatea background completă pentru utilizare în foaia de stiluri
Cazuri de utilizare pentru gradientele CSS
Fundal secțiune hero
Creați fundaluri impresionante pe toată pagina cu gradiente diagonale sau radiale
Text gradient
Aplicați gradient la text cu background-clip:text pentru efecte tipografice uimitoare
Borduri gradient
Folosiți gradient cu border-image pentru a crea rame colorate în jurul elementelor
Suprapunere imagine
Puneți gradient peste imagini pentru o suprapunere întunecată care asigură lizibilitatea textului
Cele mai bune practici pentru gradientele CSS
✓ Folosiți 135deg pentru gradiente diagonale
Un unghi de 135 de grade creează o diagonală clasică din colțul stânga sus spre dreapta jos.
✓ Păstrați gradientele subtile în UI
În elementele UI ca butoane și carduri, folosiți gradiente foarte subtile cu diferență de luminozitate de 10-20% pentru adâncime.
✓ Setați o culoare de rezervă
Adăugați o culoare de fundal solidă ca rezervă: background-color:#6366f1; background:linear-gradient(...).
✓ Animați poziția gradientului
Nu puteți anima direct gradientele CSS, dar puteți anima background-position pe un gradient mai mare pentru un efect de mișcare lin.
❓ Întrebări frecvente
Care este diferența dintre gradient liniar, radial și conic?
Gradientul liniar tranziționa de-a lungul unei linii drepte la un unghi. Cel radial radiază de la un punct central circular sau eliptic. Cel conic se rotește în jurul unui punct central — ideal pentru indicatori de progres circulari.
Cum se creează un gradient transparent?
Folosiți transparent ca oprire de culoare: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Creează un gradient de la o culoare semi-transparentă la complet transparentă — ideal pentru suprapunerea imaginilor.
De ce văd benzuri în gradientul meu?
Benzile (linii vizibile între culori) apar pe ecrane de calitate slabă sau la tranziții între nuanțe similare. Adăugați o oprire de culoare intermediară pentru a atenua tranziția.
Poate un gradient să fie folosit ca bordură?
Da; folosiți border-image:linear-gradient(...) 1. Alternativ, un pseudo-element ::before cu fundal gradient și z-index negativ poate simula o bordură gradient.