အခမဲ့ CSS ဂရေဒီယင်းထုတ်လုပ်စက်

မည်သို့ အလုပ်လုပ်သည်

Gradient generator သည် CSS gradient string များကို browser ထဲတွင် တိုက်ရိုက် တည်ဆောက်ပါသည် — library၊ server၊ upload မပါဝင်ပါ။ ကိုယ်တိုင်ရေးထားသော function တစ်ခုသည် သင့် color stop များနှင့် angle မှ မှန်ကန်သော linear-gradient၊ radial-gradient သို့မဟုတ် conic-gradient syntax ကို အချိန်နှင့်တပြေးညီ ပေါင်းစည်းပြီး သင်ရွေးချယ်သော output ပစ်မှတ် မည်သို့ ဖြစ်စေ ရလဒ်ကို ဖော်မတ်ချသည်။

1. 1
   Stop နှင့် ဦးတည်ချက် ချိန်ညှိပါ

   Browser ၏ native color picker ကို သုံး၍ color stop 2 မှ 6 ခုအထိ သတ်မှတ်ပြီး stop တစ်ခုစီကို range slider ဖြင့် 0–100% axis တစ်လျှောက် တည်နေရာချသည်။ Linear နှင့် conic gradient များအတွက် angle (0–360°) ကိုလည်း ရွေးချယ်သည်၊ radial gradient များအတွက် shape (ellipse or circle) နှင့် gradient ဘယ်လောက် ကျယ်ပြန့်စေမည်ကို ထိန်းချုပ်သော size keyword ကို ရွေးချယ်သည်။
2. 2
   buildCss သည် gradient string ကို ပေါင်းစည်းသည်

   ပြောင်းလဲမှုတိုင်းတွင် local buildCss function တစ်ခုသည် သင့် parameter များကို မှန်ကန်သော CSS function call — ဥပမာ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%) — အဖြစ် ပေါင်းစည်းသည်။ Library မပါဝင်ပါ၊ string ကို ရိုးရိုး JavaScript template logic ဖြင့် တည်ဆောက်ပြီး stop array မှ တိုက်ရိုက် ချိတ်ဆက်သည်။
3. 3
   Live preview ကို inline style မှတစ်ဆင့် render လုပ်သည်

   ပေါင်းစည်းထားသော gradient string ကို div element တစ်ခုပေါ်တွင် inline background style အဖြစ် တိုက်ရိုက် အသုံးချသည်၊ browser ၏ ကိုယ်ပိုင် CSS engine က ကြိုကြားမှုကို render လုပ်သည်။ Canvas သို့မဟုတ် ပုံ မပါဝင်ပါ — သင်မြင်ရသည်မှာ CSS property တစ်ခု အသုံးချနေသည်ကို အတိအကျ ဖြစ်သည်။
4. 4
   Format လေးမျိုးဖြင့် ကူးယူရန် အသင့် output

   Format selector တစ်ခုသည် တူညီသော gradient string ကို ရိုးရိုး CSS (background: ...)၊ solid-fallback ပါသော CSS block၊ Tailwind arbitrary-value class သို့မဟုတ် SCSS variable declaration သို့ ပြောင်းလဲသည်။ Copy ကို click လုပ်ခြင်းသည် navigator.clipboard.writeText မှတစ်ဆင့် ရွေးချယ်ထားသော output ကို clipboard သို့ ရေးသည်။ လက်ရှိ gradient ကို URL hash တွင်လည်း encode လုပ်ထားသဖြင့် bookmark (သို့) မျှဝေနိုင်သည်။

ဆက်နွှယ်သော ကိရိယာများ