---

CSS ഗ്രേഡിയന്റ് എന്താണ്?

CSS ഗ്രേഡിയന്റുകൾ ഇമേജ് ഫയലുകൾ ഉപയോഗിക്കാതെ രണ്ടോ അതിലധികമോ നിറങ്ങൾക്കിടയിൽ സുഗമമായ മാറ്റങ്ങൾ കാണിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. മൂന്ന് തരങ്ങൾ ഉണ്ട്: linear-gradient (ഒരു നേർരേഖയോളം), radial-gradient (ഒരു കേന്ദ്രബിന്ദുവിൽ നിന്ന് വ്യാപിക്കുന്ന), conic-gradient (കേന്ദ്രബിന്ദുവിന് ചുറ്റും കറങ്ങുന്ന). ഗ്രേഡിയന്റുകൾ ബാക്ഗ്രൗണ്ടുകൾ, ബട്ടണുകൾ, ഓവർലേകൾ, അലങ്കാര ഘടകങ്ങൾ എന്നിവയ്ക്ക് ഉപയോഗിക്കുന്നു.

CSS ഗ്രേഡിയന്റ് ജനറേറ്റർ ഉപയോഗിക്കുന്നത് എങ്ങനെ

1. സ്വാച്ചുകളിൽ നിന്ന് ഒരു പ്രീസെറ്റ് തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ സ്വന്തം ഗ്രേഡിയന്റ് കോൺഫിഗർ ചെയ്യുക.

2. ഗ്രേഡിയന്റ് തരം തിരഞ്ഞെടുക്കുക: linear, radial അല്ലെങ്കിൽ conic.

3. കോണം (linear/conic ന്) അല്ലെങ്കിൽ ആകൃതി (radial ന്) ക്രമീകരിക്കുക.

4. നിറ സ്റ്റോപ്പുകൾ എഡിറ്റ് ചെയ്യുക — നിറങ്ങളും സ്ഥാനങ്ങളും (0–100%) മാറ്റുക.

5. ആവശ്യാനുസരണം നിറ സ്റ്റോപ്പുകൾ ചേർക്കുക അല്ലെങ്കിൽ നീക്കുക.

6. CSS കോപ്പി ചെയ്ത് സ്റ്റൈൽഷീറ്റിൽ ഒട്ടിക്കുക.

പതിവായി ചോദിക്കപ്പെടുന്ന ചോദ്യങ്ങൾ

സുതാരമായ ഗ്രേഡിയന്റ് എങ്ങനെ ഉണ്ടാക്കാം? സമ്പൂർണ സുതാരത്വത്തിനായി ആൽഫ ചാനൽ 0 ഉപയോഗിച്ച് rgba() അല്ലെങ്കിൽ hsla() കളർ മൂല്യങ്ങൾ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, rgba(0,0,0,0) ന്റെ കളർ സ്റ്റോപ്പ് പൂർണ്ണമായും സുതാരമായ കറുപ്പാണ്, ഇമേജുകളിലെ ഫേഡ്-ഔട്ട് ഓവർലേകൾക്ക് ഉപയോഗപ്രദമാണ്.

കഠിനമായ കളർ സ്റ്റോപ്പ് (പരിവർത്തനം ഇല്ലാതെ) എങ്ങനെ സൃഷ്ടിക്കാം? ഒരേ സ്ഥാനത്ത് രണ്ട് കളർ സ്റ്റോപ്പുകൾ വയ്ക്കുക — ഒന്ന് അവസാനിക്കുകയും ഒന്ന് ആ ബിന്ദുവിൽ നിന്ന് ആരംഭിക്കുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, ചുവപ്പ് 50%, നീല 50% എന്നത് ഗ്രേഡിയന്റ് പരിവർത്തനം ഇല്ലാതെ മധ്യബിന്ദുവിൽ ചുവപ്പിൽ നിന്ന് നീലയിലേക്കുള്ള തൽക്ഷണ സ്വിച്ച് സൃഷ്ടിക്കുന്നു.

ഏത് ബ്രൗസറുകൾ കോണിക് ഗ്രേഡിയന്റുകൾ പിന്തുണയ്ക്കുന്നു? കോണിക് ഗ്രേഡിയന്റുകൾ എല്ലാ ആധുനിക ബ്രൗസറുകളിൽ പിന്തുണയ്ക്കുന്നു (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ പിന്തുണയ്ക്കുന്നില്ല.

ഒരേ ഘടകത്തിൽ ഒന്നിലധികം ഗ്രേഡിയന്റുകൾ ഉപയോഗിക്കാൻ കഴിയുമോ? അതെ. CSS പശ്ചാത്തലം കോമ-വിഭജിത പാളികളുടെ ഒരു ലിസ്റ്റ് സ്വീകരിക്കുന്നു. നിങ്ങൾക്ക് ഗ്രേഡിയന്റുകൾ സ്റ്റാക്ക് ചെയ്യാൻ, അവ പശ്ചാത്തല ചിത്രങ്ങളുമായി സംയോജിപ്പിക്കാൻ, ഓരോ പാളിയുടെയും സ്ഥാനവും വലിപ്പവും സ്വതന്ത്രമായി നിയന്ത്രിക്കാൻ കഴിയും.

Keywords: CSS ഗ്രേഡിയന്റ് ജനറേറ്റർ, ലീനിയർ ഗ്രേഡിയന്റ്, റേഡിയൽ ഗ്രേഡിയന്റ്, കോണിക് ഗ്രേഡിയന്റ്, CSS ബാക്ഗ്രൗണ്ട് ജനറേറ്റർ, ഗ്രേഡിയന്റ് കളർ പിക്കർ, CSS ഗ്രേഡിയന്റ് ടൂൾ