නොමිලේ CSS Gradient සකසන්නා

එය ක්‍රියා කරන්නේ කෙසේද

gradient උත්පාදකය CSS gradient strings කෙලින්ම බ්‍රවුසරයේ ගොඩනගයි — පුස්තකාලයක්, සර්වරයක්, උඩුගත කිරීමක් නැත. අතින් ලියන ලද ශ්‍රිතයක් ඔබේ වර්ණ stops සහ angle එකෙන් තථ්‍ය කාලීනව නිවැරදි linear-gradient, radial-gradient, හෝ conic-gradient syntax එකලස් කර, ඔබ තෝරාගත් ප්‍රතිදාන target එකට ප්‍රතිඵලය format කරයි.

1. 1
   Stops සහ දිශාව වින්‍යාස කරන්න

   ඔබ බ්‍රවුසරයේ native color picker එකෙන් වර්ණ stops 2ත් 6ත් අතර ගණනක් සකසා, පසුව range slider එකකින් 0–100% axis එක දිගේ එක් එක් stop එක ස්ථානගත කරයි. linear සහ conic gradients සඳහා ඔබ angle එකක් (0–360°) තෝරයි; radial gradients සඳහා ඔබ shape එක (ellipse හෝ circle) සහ gradient එක කොපමණ දුරට විහිදේද යන්න පාලනය කරන size keyword එක තෝරයි.
2. 2
   buildCss gradient string එක එකලස් කරයි

   සෑම වෙනසකදීම, දේශීය buildCss ශ්‍රිතයක් ඔබේ parameters නිවැරදි CSS function ඇමතුමකට එකතු කරයි — උදා. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). පුස්තකාලයක් සම්බන්ධ නොවේ; string එක සරල JavaScript template logic වලින් ගොඩනගා stop array එකෙන් කෙලින්ම join කෙරේ.
3. 3
   සජීවී පෙරදසුන inline style හරහා නිරූපණය වේ

   එකලස් කළ gradient string එක div element එකකට inline background style එකක් ලෙස කෙලින්ම යොදනු ලැබේ, එබැවින් බ්‍රවුසරයේම CSS එන්ජිම පෙරදසුන නිරූපණය කරයි. canvas එකක් හෝ image එකක් සම්බන්ධ නොවේ — ඔබ දකින දේ literally යොදන ලද CSS property එකයි.
4. 4
   ආකෘති හතරකින් පිටපත්-කිරීමට-සූදානම් ප්‍රතිදානය

   format selector එකක් එකම gradient string එක plain CSS (background: ...), CSS-with-solid-fallback block එකක්, Tailwind arbitrary-value class එකක්, හෝ SCSS variable declaration එකක් ලෙස පරිවර්තනය කරයි. Copy ක්ලික් කිරීම navigator.clipboard.writeText හරහා තෝරාගත් ප්‍රතිදානය clipboard වෙත ලියයි. වත්මන් gradient එකද URL hash එකේ encode වන නිසා ඔබට එය bookmark කිරීමට හෝ බෙදාගැනීමට හැක.

සම්බන්ධ මෙවලම්