സൗജന്യ CSS ഗ്രേഡിയന്റ് ജനറേറ്റർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഗ്രേഡിയന്റ് ജനറേറ്റർ CSS ഗ്രേഡിയന്റ് സ്ട്രിംഗുകൾ നേരിട്ട് ബ്രൗസറിൽ നിർമ്മിക്കുന്നു — ലൈബ്രറിയില്ല, സെർവറില്ല, അപ്‌ലോഡില്ല. ഒരു കൈകൊണ്ട് എഴുതിയ ഫംഗ്ഷൻ നിങ്ങളുടെ നിറ സ്റ്റോപ്പുകളിൽ നിന്നും ആംഗിളിൽ നിന്നും ശരിയായ linear-gradient, radial-gradient, അല്ലെങ്കിൽ conic-gradient സിന്റാക്സ് തത്സമയം കൂട്ടിച്ചേർത്ത്, നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന ഏത് ഔട്ട്പുട്ട് ടാർഗെറ്റിനും ഫലം ഫോർമാറ്റ് ചെയ്യുന്നു.

1. 1
   സ്റ്റോപ്പുകളും ദിശയും കോൺഫിഗർ ചെയ്യുക

   ബ്രൗസറിന്റെ native നിറ പിക്കർ ഉപയോഗിച്ച് 2-നും 6-നും ഇടയിൽ നിറ സ്റ്റോപ്പുകൾ സെറ്റ് ചെയ്യുന്നു, പിന്നെ ഒരു റേഞ്ച് സ്ലൈഡർ ഉപയോഗിച്ച് 0–100% ആക്സിസിലുള്ള ഓരോ സ്റ്റോപ്പും സ്ഥാനപ്പെടുത്തുന്നു. Linear, conic ഗ്രേഡിയന്റുകൾക്ക് നിങ്ങൾ ഒരു ആംഗിളും (0–360°) തിരഞ്ഞെടുക്കുന്നു; radial ഗ്രേഡിയന്റുകൾക്ക് നിങ്ങൾ ആകൃതി (ellipse അല്ലെങ്കിൽ circle), ഗ്രേഡിയന്റ് എത്ര ദൂരം വ്യാപിക്കണം എന്ന് നിയന്ത്രിക്കുന്ന വലുപ്പ കീവേഡ് എന്നിവ തിരഞ്ഞെടുക്കുന്നു.
2. 2
   buildCss ഗ്രേഡിയന്റ് സ്ട്രിംഗ് കൂട്ടിച്ചേർക്കുന്നു

   ഓരോ മാറ്റത്തിലും, ഒരു പ്രാദേശിക buildCss ഫംഗ്ഷൻ നിങ്ങളുടെ പാരാമീറ്ററുകൾ ശരിയായ CSS ഫംഗ്ഷൻ കോളിലേക്ക് കൂട്ടിച്ചേർക്കുന്നു — ഉദാ. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). ഒരു ലൈബ്രറിയും ഉൾപ്പെട്ടിട്ടില്ല; സ്ട്രിംഗ് സാധാരണ JavaScript ടെംപ്ലേറ്റ് ലോജിക് ഉപയോഗിച്ച് നിർമ്മിച്ച് സ്റ്റോപ്പ് അറേയിൽ നിന്ന് നേരിട്ട് ചേർത്തിരിക്കുന്നു.
3. 3
   ലൈവ് പ്രിവ്യൂ ഇൻലൈൻ സ്റ്റൈൽ വഴി റെൻഡർ ചെയ്യുന്നു

   കൂട്ടിച്ചേർത്ത ഗ്രേഡിയന്റ് സ്ട്രിംഗ് ഒരു div എലമെന്റിൽ നേരിട്ട് ഒരു ഇൻലൈൻ പശ്ചാത്തല സ്റ്റൈലായി പ്രയോഗിക്കുന്നു, അതിനാൽ ബ്രൗസറിന്റെ സ്വന്തം CSS എഞ്ചിൻ പ്രിവ്യൂ റെൻഡർ ചെയ്യുന്നു. കാൻവാസോ ചിത്രമോ ഉൾപ്പെട്ടിട്ടില്ല — നിങ്ങൾ കാണുന്നത് അക്ഷരാർത്ഥത്തിൽ CSS പ്രോപ്പർട്ടി പ്രയോഗിക്കപ്പെടുന്നതാണ്.
4. 4
   നാല് ഫോർമാറ്റുകളിൽ പകർത്താൻ തയ്യാറായ ഔട്ട്പുട്ട്

   ഒരു ഫോർമാറ്റ് സെലക്ടർ അതേ ഗ്രേഡിയന്റ് സ്ട്രിംഗിനെ പ്ലെയിൻ CSS (background: ...), ഒരു CSS-with-solid-fallback ബ്ലോക്ക്, ഒരു Tailwind ഇഷ്ടാനുസൃത-മൂല്യ ക്ലാസ്, അല്ലെങ്കിൽ ഒരു SCSS വേരിയബിൾ ഡിക്ലറേഷൻ ആയി മാറ്റുന്നു. Copy ക്ലിക്ക് ചെയ്യുന്നത് navigator.clipboard.writeText വഴി തിരഞ്ഞെടുത്ത ഔട്ട്പുട്ട് ക്ലിപ്ബോർഡിലേക്ക് എഴുതുന്നു. നിലവിലെ ഗ്രേഡിയന്റ് URL ഹാഷിലും എൻകോഡ് ചെയ്യപ്പെടുന്നു, അതിനാൽ നിങ്ങൾക്ക് ഇത് ബുക്ക്മാർക്ക് ചെയ്യാം അല്ലെങ്കിൽ ഷെയർ ചെയ്യാം.

അനുബന്ധ ടൂളുകൾ