Անցնել հիմնական բովանդակությանը
LibraTool logoLibraTool

CSS գրադիենտի գեներատոր անվճար

Ստեղծեք գծային, ռադիալ ու կոնիկ CSS գրադիենտներ ուղիղ նախադիտմամբ: Մեկ սեղմումով պատճենեք CSS-ը:

Աշխատում է անցանց՝ բեռնվելուց հետո
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Խուսափում է մոխրագույն միջանկյալ կետերից շատ տարբեր գույների միջև։ Ավելացնում է սովորական sRGB տող՝ որպես պահուստ հին դիտարկիչների համար։

0%
100%

Նախաձևեր

Տարածված կիրառություններ

  • Ստեղծեք գրադիենտներ հերոսի բաժինների համարԴիզայն հավասար էջի գրադիենտ ֆոներ վեբ կայքի հերոսի բաժինների և վայր ընկնելու էջերի համար:
  • Ստեղծեք գրադիենտ կոճակներ և CTAԴիզայն աչքի կոչ գրադիենտ կոճակների ֆոներ, որ ընկնելու կոչերի համար, որ կանգնած են:
  • Ստեղծեք գրադիենտ ֆոներ քարտի համարԴիզայն գրադիենտ լցումներ քարտի, մոդալի, ինչ-ինչ ստորակետներ և UI մասի ֆոներ:
  • Ստեղծեք գրադիենտներ սոցիալական մեդիայի գրաֆիկայի համարԴիզայն կենդանի գրադիենտ ֆոներ Instagram գրառումների, YouTube մինիատյուրների և Twitter քարտերի համար:
  • Ստեղծեք գույնի սանդղակ գծապատկերների համարՍտեղծեք գրադիենտ գույնի սանդղակ ջերմային քարտեզների, առաջընթացի դրույքաչափերի և տվյալների վիզուալացման համար:

Ինչպես է այն աշխատում

Գունային անցման գեներատորը կառուցում է CSS gradient տողեր ուղղակիորեն դիտարկիչում — ոչ մի գրադարան, ոչ մի սերվեր, ոչ մի վերբեռնում։ Ձեռագիր ֆունկցիան հավաքում է ճիշտ linear-gradient, radial-gradient կամ conic-gradient շարահյուսությունը ձեր գունային կանգառներից և անկյունից իրական ժամանակում, ապա ձևաչափում է արդյունքը ձեր ընտրած ցանկացած ելքային թիրախի համար։

  1. 1
    Կազմաձևեք կանգառներն ու ուղղությունը
    Դուք սահմանում եք 2-ից 6 գունային կանգառ՝ օգտագործելով դիտարկիչի բնիկ գույնի ընտրիչը, ապա դիրքավորում եք յուրաքանչյուր կանգառ 0–100% առանցքի երկայնքով տիրույթի սահիչով։ Գծային և կոնիկ գունային անցումների համար նաև ընտրում եք անկյուն (0–360°). ճառագայթային անցումների համար ընտրում եք ձևը (էլիպս կամ շրջան) և չափի հիմնաբառը, որը վերահսկում է, թե որքան հեռու է ձգվում գունային անցումը։
  2. 2
    buildCss-ը հավաքում է գունային անցման տողը
    Ամեն փոփոխության ժամանակ տեղային buildCss ֆունկցիան միացնում է ձեր պարամետրերը ճիշտ CSS ֆունկցիայի կանչի մեջ — օր.՝ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)։ Ոչ մի գրադարան ներգրավված չէ. տողը կառուցվում է պարզ JavaScript ձևանմուշային տրամաբանությամբ և ուղղակիորեն միանում է կանգառների զանգվածից։
  3. 3
    Կենդանի նախադիտումը մատուցվում է ներգծված ոճով
    Հավաքված գունային անցման տողը ուղղակիորեն կիրառվում է div տարրի վրա որպես ներգծված ֆոնային ոճ, ուստի դիտարկիչի սեփական CSS շարժիչը մատուցում է նախադիտումը։ Ոչ մի canvas կամ պատկեր ներգրավված չէ — ինչ տեսնում եք, բառացիորեն CSS հատկությունն է, որ կիրառվում է։
  4. 4
    Պատրաստ-պատճենելու ելք չորս ձևաչափով
    Ձևաչափի ընտրիչը նույն գունային անցման տողը փոխակերպում է պարզ CSS-ի (background: ...), CSS-ի պինդ-փոխարինման-բլոկով, Tailwind կամայական-արժեքով դասի, կամ SCSS փոփոխականի հայտարարության։ Պատճենել սեղմելը ընտրված ելքը գրում է սեղմատախտակին navigator.clipboard.writeText-ով։ Ընթացիկ գունային անցումը նաև ծածկագրվում է URL հեշում, որպեսզի կարողանաք էջանշել կամ կիսվել դրանով։

Առնչվող գործիքներ

🟦

CSS Grid Գեներատոր

Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:

Փորձեք այն
↔️

CSS Flexbox Գեներատոր

Փորձեք flex ուղղությունը, փաթեթը, հիմնավորումը և հավասարեցումը իրական տարրերի վրա — և պատճեն անեք CSS-ը:

Փորձեք այն
🧮

Մատրիցային հաշվիչ

Գումարեք, հանեք, բազմապատկեք, տրանսպոնացրեք, շրջեք և կրճատեք մատրիցները, ինչպես նաև որոշիչ, ռանգ, սեփական արժեքներ և լուծեք Ax = b՝ մինչև 8×8, մեկ հպումով պատճենմամբ։ Անվճար և մասնավոր։

Փորձեք այն

Հաճախակի տրվող հարցեր