Sintaxa gradientului scrisă de mână e greu de controlat: unghiul, ordinea opririlor și pozițiile în procente se influențează reciproc, iar o singură greșeală de tastare îți strică pe tăcute întreg background-ul. Acest generator ține previzualizarea și codul perfect sincronizate - ce vezi este exact, caracter cu caracter, CSS-ul pe care îl copiezi. Rulează integral în browser, deci nimic din ce creezi nu ajunge pe vreun server.
CSS Gradient Generator Gratuit
Rulează integral în browserul tău - fără încărcare, fără cont.
Tip
Opriri de culoare
Cod CSS
Ce este un CSS gradient generator?
Un CSS gradient generator este un instrument vizual care îți scrie automat codul pentru linear-gradient(), radial-gradient() sau conic-gradient(). Alegi culorile, tragi opririle de pe traseul gradientului, setezi unghiul, iar codul CSS gata de lipit apare instant, în timp ce previzualizarea live îți arată exact ce va afișa browserul. Totul se întâmplă direct în browser.
Cum se folosește
- 1Alege tipul de gradient. Selectezi linear, radial sau conic. Linear afișează un cursor de unghi; radial adaugă forma (cerc sau elipsă) și poziția; conic are un unghi de start și o poziție.
- 2Setează opririle de culoare. Dai click pe fiecare mostră pentru a alege o culoare și tragi cursorul ei pentru a muta oprirea de-a lungul gradientului. Poți adăuga până la 8 opriri sau șterge până la 2.
- 3Ajustează direcția. Tragi cursorul de unghi (0-360 de grade) sau alegi un cuvânt-cheie de poziție. Previzualizarea se actualizează live la fiecare schimbare.
- 4Copiază CSS-ul. Apeși Copy pentru a prelua declarația background, inclusiv o linie de rezervă cu culoare solidă, și o lipești în foaia ta de stiluri.
Pentru cine este
- Dezvoltatorii front-end care au nevoie de un fundal pentru hero, card sau buton și vor linia exactă de
linear-gradient()fără să rețină sintaxa pe de rost. - Designerii web și UI care recreează un mockup: reconstruiesc gradientul vizual, apoi trimit CSS-ul generat direct echipei de dezvoltare.
- Cei care fac email-uri și landing page-uri și au nevoie de o linie de rezervă cu culoare solidă, ca designul să se degradeze elegant în clienții vechi - ieșirea include automat una.
- Studenții care învață CSS și vor să vadă în timp real cum unghiul, opririle de culoare și tipul de gradient schimbă rezultatul afișat.
Întrebări frecvente
Acest CSS gradient generator este gratuit?
Da - 100% gratuit, fără cont, fără filigran, fără limite. Poți crea oricâte gradienturi dorești și copia CSS-ul direct în proiectul tău.
Se trimite ceva pe un server?
Nu. Gradientul este construit și previzualizat integral în browser, cu JavaScript simplu. Nicio culoare, cod sau date de utilizare nu sunt trimise nicăieri.
Care este diferența dintre gradientul linear, radial și conic?
Un gradient linear amestecă culorile de-a lungul unei linii drepte, la unghiul ales de tine. Un gradient radial iradiază dintr-un punct central, sub formă de cerc sau elipsă. Un gradient conic rotește culorile în jurul unui punct central, ca o roată de culori sau un grafic tip plăcintă.
Cum funcționează opririle de culoare în gradienturile CSS?
Fiecare oprire asociază o culoare cu o poziție între 0% și 100% de-a lungul liniei gradientului. Browserul amestecă lin culorile dintre opririle vecine. Dacă pui două opriri în aceeași poziție, obții o margine dură în loc de amestec - util pentru dungi sau efecte de tip plăcintă.
Ce browsere suportă aceste gradienturi?
Toate browserele moderne - Chrome, Firefox, Safari și Edge - suportă linear-gradient() și radial-gradient() fără prefix; conic-gradient() este suportat peste tot din 2020. Codul copiat include și un fallback cu culoare solidă pentru orice e mai vechi.
Pot folosi gradientul generat ca și culoare de text?
Nu direct - gradienturile sunt imagini, nu culori. Aplici gradientul ca background-image pe elementul de text, apoi adaugi background-clip: text și color: transparent, ca gradientul să se vadă prin literele textului.
De ce gradientul meu are dungi vizibile (banding)?
Dungile apar când două opriri îndepărtate se amestecă pe o distanță lungă între nuanțe apropiate, scoțând în evidență pașii de culoare pe 8 biți. Reduci efectul adăugând o oprire de culoare intermediară, scurtând distanța de amestec sau alegând culori care diferă atât în luminozitate, cât și în nuanță.