Pereiti prie pagrindinio turinio
LibraTool logoLibraTool

CSS gradiento generatorius nemokamai

Kurkite linijinius, radialinius ir koninius CSS gradientus su gyvos peržiūros galimybe. Kopijuokite CSS vienu paspaudimu.

Veikia neprisijungus, kai įkeliama
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Išvengia pilkų vidurio taškų tarp labai skirtingų spalvų. Senesnėms naršyklėms prideda paprastą sRGB eilutę kaip atsarginę.

0%
100%

Išankstiniai nustatymai

Dažniausi naudojimo būdai

  • Sukurkite gradientus herojiškoms dalimsSukurkite ištisą puslapį gradientiniu fonu herojiškoms dalims ir nukreipiamieji puslapiams.
  • Sukurkite gradiento mygtukus ir CTASukurkite patrauklius gradiento mygtukų fonus skambinimams į veiksmą, kurie išsiskiria.
  • Sukurkite gradiento fonus kortelėmsSukurkite gradiento pildymus kortelėms, modaliniams dialogams, šoninėms juostoms ir UI komponentų fonams.
  • Sukurkite gradientus socialinės žiniasklaidos grafikomsSukurkite gyvas gradiento fonus„Instagram
  • Sukurkite spalvų skalę diagramomsSugeneruokite gradiento spalvų skalę šilumos žemėlapiams, eigos juostoms ir duomenų vizualizacijoms.

Kaip tai veikia

Gradiento generatorius sukuria CSS gradiento eilutes tiesiai naršyklėje — jokios bibliotekos, jokio serverio, jokio įkėlimo. Rankomis parašyta funkcija realiu laiku sukuria teisingą linear-gradient, radial-gradient ar conic-gradient sintaksę iš jūsų spalvų sustojimo taškų ir kampo, tada suformatuoja rezultatą pagal pasirinktą išvesties tikslą.

  1. 1
    Sukonfigūruokite sustojimo taškus ir kryptį
    Nustatote nuo 2 iki 6 spalvų sustojimo taškų, naudodami naršyklės natyvų spalvos parinkiklį, tada pozicionuojate kiekvieną tašką ties 0–100% ašimi intervalo slankikliu. Linijiniams ir kūginiams gradientams taip pat pasirenkate kampą (0–360°); radialiniams gradientams pasirenkate formą (elipsė ar apskritimas) ir dydžio raktažodį, kuris valdo, kaip toli tęsiasi gradientas.
  2. 2
    buildCss sukonstruoja gradiento eilutę
    Kaskart pasikeitus, vietinė buildCss funkcija sujungia jūsų parametrus į teisingą CSS funkcijos iškvietimą — pvz., linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Jokia biblioteka nedalyvauja; eilutė kuriama paprastu JavaScript šablono logika ir sujungiama tiesiai iš sustojimo taškų masyvo.
  3. 3
    Gyva peržiūra atvaizduojama per vidinį stilių
    Sukonstruota gradiento eilutė tiesiogiai taikoma div elementui kaip vidinis fono stilius, todėl pati naršyklės CSS variklis atvaizduoja peržiūrą. Čia nėra jokio canvas ar paveikslėlio — tai, ką matote, yra tiesiogine prasme taikoma CSS savybė.
  4. 4
    Paruošta kopijuoti išvestis keturiais formatais
    Formato pasirinkiklis paverčia tą pačią gradiento eilutę į paprastą CSS (background: ...), CSS su vienspalve atsargine spalva, Tailwind savavališkos reikšmės klasę arba SCSS kintamojo deklaraciją. Spustelėjus „Kopijuoti“, pasirinkta išvestis įrašoma į iškarpinę per navigator.clipboard.writeText. Dabartinis gradientas taip pat užkoduojamas URL fragmente (hash), todėl galite jį išsaugoti žymele ar juo pasidalyti.

Susiję įrankiai

🟦

CSS tinklelio generatorius

Vizualiai sukurkite CSS tinklelį – takelius, vienetus ir tarpus – ir nukopijuokite sugeneruotą CSS ir HTML.

Išbandykite
↔️

CSS Flexbox generatorius

Eksperimentuokite su flex kryptimi, vyniojimu, išdėstymu (justify) ir lygiavimu (align) gyvuose elementuose – ir nukopijuokite CSS.

Išbandykite
🧮

Matricų skaičiuotuvas

Sudėkite, atimkite, dauginkite, transponuokite, invertuokite ir suprastinkite matricas, raskite determinantą, rangą, tikrines reikšmes ir spręskite Ax = b — iki 8×8, su kopijavimu vienu paspaudimu. Nemokama ir privatu.

Išbandykite

Dažnai užduodami klausimai