Salt la conținutul principal
LibraTool logoLibraTool

Generator Gradient CSS — gratuit

Creează gradiente CSS liniare, radiale și conice cu previzualizare live. Copiază CSS-ul cu un singur clic.

Funcționează offline odată încărcat
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Evită punctele de mijloc cenușii între culori foarte diferite. Adaugă o linie sRGB simplă ca alternativă pentru browserele mai vechi.

0%
100%

Presetări

Utilizări frecvente

  • Creați gradiente pentru secțiuni erouProiectați fundaluri cu gradient pe pagină întreagă pentru secțiuni erou și pagini de aterizare ale site-ului.
  • Creați butoane cu gradient și CTA-uriProiectați fundaluri de buton gradient cu grad ridicat pentru apeluri la acțiune care se remarcă.
  • Creați fundaluri cu gradient pentru carduriProiectați umpleri cu gradient pentru carduri, ferestre modale, panouri laterale și fundaluri componente UI.
  • Creați gradiente pentru grafică media socialăProiectați fundaluri cu gradient vibrant pentru postări Instagram, miniaturi YouTube și carduri Twitter.
  • Creați scale de culoare pentru diagrameleGenerați scale de culoare cu gradient pentru hărți de căldură, bare de progres și vizualizări de date.

Cum funcționează

Generatorul de gradient construiește șiruri de gradient CSS direct în browser — fără bibliotecă, fără server, fără încărcare. O funcție scrisă manual asamblează în timp real sintaxa corectă linear-gradient, radial-gradient sau conic-gradient din opririle de culoare și unghiul tău, apoi formatează rezultatul pentru formatul de ieșire ales.

  1. 1
    Configurează opririle și direcția
    Setezi între 2 și 6 opriri de culoare folosind selectorul nativ de culoare al browser-ului, apoi poziționezi fiecare oprire de-a lungul axei 0–100% cu un cursor de tip range. Pentru gradienturi liniare și conice alegi de asemenea un unghi (0–360°); pentru gradienturi radiale alegi forma (elipsă sau cerc) și cuvântul cheie de dimensiune care controlează cât de departe se extinde gradientul.
  2. 2
    buildCss asamblează șirul gradientului
    La fiecare schimbare, o funcție locală buildCss concatenează parametrii tăi în apelul de funcție CSS corect — de exemplu, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nicio bibliotecă nu este implicată; șirul este construit cu logică de șablon JavaScript simplu și unit direct din array-ul de opriri.
  3. 3
    Previzualizarea live se randează prin stil inline
    Șirul gradient asamblat este aplicat direct pe un element div ca stil de fundal inline, astfel încât motorul CSS propriu al browser-ului randează previzualizarea. Nu există canvas sau imagine implicată — ceea ce vezi este literalmente proprietatea CSS fiind aplicată.
  4. 4
    Ieșire gata de copiat în patru formate
    Un selector de format transformă același șir de gradient în CSS simplu (background: ...), un bloc CSS cu variantă de rezervă solidă, o clasă Tailwind cu valoare arbitrară, sau o declarație de variabilă SCSS. Clic pe Copiază scrie ieșirea selectată în clipboard prin navigator.clipboard.writeText. Gradientul curent este de asemenea codificat în hash-ul URL astfel încât îl poți salva la favorite sau partaja.

Instrumente similare

🟦

Generator CSS Grid

Proiectați vizual un CSS grid — tracks, unități și spații — și copiați CSS și HTML generat.

Încearcă
↔️

Generator CSS Flexbox

Experimentați cu direcție flex, înfășurare, justificare și aliniere pe elemente în direct — și copiați CSS-ul.

Încearcă
🧮

Calculator de Matrice

Adună, scade, înmulțește, transpune, inversează și reduce matrice, plus determinant, rang, valori proprii și rezolvarea Ax = b — până la 8×8, cu copiere dintr-o atingere. Gratuit și privat.

Încearcă

Întrebări frecvente