Construiește degradeuri CSS liniare, radiale și conice de la zero cu control multi-stație trăgabil și preseturi curate. Copiază CSS gata de utilizat instant.

Previzualizare live
Preseturi
Tipul degradeului
Unghi
°
Stații de culoare
Trage un mâner pentru a muta o stație sau dă clic pe bară pentru a adăuga una. Selectează o stație pentru a-i edita culoarea.
Stație selectată
%
CSS
background: ;

Totul este calculat live în browserul tău — fără înregistrare, complet gratuit.


Despre Generator de degradeuri

Generatorul de Gradient construiește gradiente CSS personalizate de la zero. Alege un tip liniar, radial sau conic, setează unghiul și modelează amestecul cu un editor cu opriri multiple: trage mânerele pentru a muta opririle, dă clic pe bară pentru a adăuga altele noi și recolorează orice oprire cu un selector — previzualizarea live se actualizează pe măsură ce lucrezi.

Presetările curate îți oferă un punct de plecare solid când nu vrei să începi de la o pagină goală, iar acțiunile dintr-un clic — aleatoriu, inversare, rotire la 45° — fac explorarea rapidă. CSS-ul generat este mereu vizibil și rămâne sincronizat cu previzualizarea, așa că ceea ce copiezi este exact ceea ce ai văzut.

Totul este calculat live în browser, gratuit. Copiază regula CSS completă sau doar valoarea de fundal și lipește-o într-o foaie de stiluri, un stil de buton sau o secțiune hero — un generator direct de gradient CSS pentru fundaluri, suprapuneri și accente UI.

Cum să utilizați Generator de degradeuri

  1. Alege un tip de gradient: liniar, radial sau conic.
  2. Pornește de la o presetare sau dă clic pe „Aleatoriu” pentru un punct de plecare instant.
  3. Trage mânerele opririlor pentru a poziționa culorile, dă clic pe bară pentru a adăuga opriri și editează culoarea fiecărei opriri.
  4. Ajustează unghiul sau folosește „Inversează” și „Rotește 45°” pentru a reorienta amestecul.
  5. Copiază regula CSS sau valoarea de fundal și lipește-o în proiectul tău.

Întrebări frecvente

Da. Instrumentul este complet pe partea de client — fără înregistrare, fără credite și fără limite la câte gradiente construiești sau copiezi.

Un gradient liniar amestecă culorile de-a lungul unei linii drepte la unghiul ales de tine. Un gradient radial radiază spre exterior dintr-un punct central în cercuri. Un gradient conic mătură culorile în jurul unui punct central ca un grafic circular, ceea ce este excelent pentru roți de culori și inele de progres.

Un gradient are nevoie de cel puțin două opriri, și poți continua să dai clic pe bară pentru a adăuga mai multe. Fiecare oprire are propria culoare și poziție glisabilă, astfel încât amestecurile complexe cu mai multe culori sunt ușor de construit.

Gradientele liniare și radiale sunt suportate peste tot. Gradientele conice sunt suportate în toate browserele moderne, dar nu în cele foarte vechi, așa că oferă o culoare de fundal de rezervă dacă trebuie să suporți versiuni vechi.

Da — folosește instrumentul însoțitor Generator de Gradient din Imagine, care extrage culorile dominante ale unei imagini încărcate și le transformă în opriri de gradient editabile. Acest instrument este echivalentul de la zero.


Căutări populare
generator de gradient creator de gradient css generator de gradient liniar creator de gradient radial gradient conic css generator de gradient gratuit
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.