Pāriet uz galveno saturu
LibraTool logoLibraTool

CSS gradienta ģenerētājs bez maksas

Izveido lineārus, radiālus un koniskus CSS gradientus ar tiešraides priekšskatījumu. Kopē CSS ar vienu klikšķi.

Darbojas bezsaistē pēc ielādes
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Novērš pelēkus vidus toņus starp ļoti atšķirīgām krāsām. Pievieno parastu sRGB rindu kā rezerves variantu vecākiem pārlūkiem.

0%
100%

Iepriekšēji iestatījumi

Biežākie lietojumi

  • Izveidojiet gradientus varona sekcijāmIzstrādājiet pilnas lapas gradienta fona varona sekcijām un ievadīšanas lapām.
  • Izveidojiet gradientu pogas un CTAIzstrādājiet pievilcīgus gradientu pogu fonus darbības aicinājumiem, kas izceļas.
  • Izveidojiet gradientu fonus kartēmIzstrādājiet gradientu aizpildījumus kartēm, modāļiem dialoga logu, sāņu joslām un UI komponentu foniem.
  • Izveidojiet gradientus sociālo mediju grafikamIzstrādājiet dzīvus gradientu fonus Instagram ierakstiem, YouTube sīktēlēm un Twitter kartēm.
  • Izveidojiet krāsu skalas diagrammāmĢenerējiet gradientu krāsu skalas karstummaņķes, progresa joslas un datu vizualizācijas.

Kā tas darbojas

Gradienta ģenerators veido CSS gradienta virknes tieši pārlūkprogrammā — bez bibliotēkas, bez servera, bez augšupielādes. Pašrakstīta funkcija saliek pareizo linear-gradient, radial-gradient vai conic-gradient sintaksi no jūsu krāsu pieturām un leņķa reālajā laikā, tad formatē rezultātu jebkuram izvēlētajam izvades mērķim.

  1. 1
    Konfigurējiet pieturas un virzienu
    Jūs iestatāt no 2 līdz 6 krāsu pieturām, izmantojot pārlūkprogrammas vietējo krāsu izvēlni, tad novietojat katru pieturu gar 0–100% asi ar diapazona slīdni. Lineārajiem un koniskajiem gradientiem jūs arī izvēlaties leņķi (0–360°); radiālajiem gradientiem jūs izvēlaties formu (elipse vai aplis) un izmēra atslēgvārdu, kas kontrolē, cik tālu gradients paplašinās.
  2. 2
    buildCss saliek gradienta virkni
    Ar katru izmaiņu vietējā buildCss funkcija apvieno jūsu parametrus pareizajā CSS funkcijas izsaukumā — piemēram, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nav iesaistīta neviena bibliotēka; virkne tiek veidota ar vienkāršu JavaScript veidnes loģiku un savienota tieši no pieturu masīva.
  3. 3
    Dzīvs priekšskatījums renderē caur iekļauto stilu
    Saliktā gradienta virkne tiek pielietota tieši div elementam kā iekļauts fona stils, tāpēc pārlūkprogrammas pašs CSS dzinējs renderē priekšskatījumu. Nav iesaistīts neviens audekls vai attēls — tas, ko redzat, ir burtiski pielietotā CSS īpašība.
  4. 4
    Kopēšanai gatava izvade četros formātos
    Formāta selektors pārveido to pašu gradienta virkni vienkāršā CSS (background: ...), CSS-ar-cietvielas-rezervi bloku, Tailwind patvaļīgas vērtības klasi vai SCSS mainīgā deklarāciju. Noklikšķinot uz Kopēt, izvēlētā izvade tiek ierakstīta starpliktuvē caur navigator.clipboard.writeText. Pašreizējais gradients tiek arī kodēts URL fragmentā, lai varētu to saglabāt grāmatzīmēs vai koplietot.

Saistītie rīki

🟦

CSS režģa ģenerators

Vizuāli noformējiet CSS režģi — sliedes, vienības un spraugas — un kopējiet ģenerēto CSS un HTML.

Izmēģināt
↔️

CSS Flexbox ģenerators

Eksperimentējiet ar flex virzienu, apvītošanu, justify un align uz tiešajiem elementiem — un kopējiet CSS.

Izmēģināt
🧮

Matricu kalkulators

Saskaitiet, atņemiet, reiziniet, transponējiet, invertējiet un vienkāršojiet matricas, atrodiet determinantu, rangu, īpašvērtības un risiniet Ax = b — līdz 8×8, ar kopēšanu vienā pieskārienā. Bez maksas un privāti.

Izmēģināt

Bieži uzdotie jautājumi