സൗജന്യ കൺവെർട്ടർ

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

തത്സമയ പ്രിവ്യൂ ഉപയോഗിച്ച് ദൃശ്യപരമായി CSS ഗ്രേഡിയൻ്റുകൾ സൃഷ്ടിക്കുക. ഇഷ്‌ടാനുസൃത വർണ്ണ സ്റ്റോപ്പുകൾ ഉപയോഗിച്ച് ലീനിയർ, റേഡിയൽ, കോൺക് ഗ്രേഡിയൻ്റുകൾ സൃഷ്‌ടിക്കുക - സ്വതന്ത്രവും ക്ലയൻ്റ് സൈഡും.

തത്സമയ പ്രിവ്യൂ
CSS ഔട്ട്പുട്ട്
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
ആംഗിൾ (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

ഈ ടൂളിനെ കുറിച്ച്

ഒരു വിഷ്വൽ എഡിറ്റർ ഉപയോഗിച്ച് മനോഹരമായ CSS ലീനിയർ, റേഡിയൽ ഗ്രേഡിയൻ്റുകൾ സൃഷ്ടിക്കുക. നിറങ്ങൾ തിരഞ്ഞെടുക്കുക, സ്റ്റോപ്പുകൾ ക്രമീകരിക്കുക, ദിശയോ ആംഗിളോ മാറ്റുക, തത്സമയം തത്സമയ പ്രിവ്യൂ അപ്‌ഡേറ്റ് കാണുക. പഴയ ബ്രൗസറുകൾക്കുള്ള വെണ്ടർ പ്രിഫിക്‌സുകൾ ഉൾപ്പെടെ - ജനറേറ്റുചെയ്‌ത CSS കോഡ് പകർത്തി നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റിൽ നേരിട്ട് ഒട്ടിക്കുക.

ഉപയോഗിക്കേണ്ട വിധം

  1. ഗ്രേഡിയൻ്റ് തരം തിരഞ്ഞെടുക്കുക: ലീനിയർ അല്ലെങ്കിൽ റേഡിയൽ.
  2. ഗ്രേഡിയൻ്റ് ബാറിൽ ക്ലിക്കുചെയ്‌ത് നിറങ്ങൾ തിരഞ്ഞെടുത്ത് കളർ സ്റ്റോപ്പുകൾ ചേർക്കുക.
  3. നിയന്ത്രണങ്ങൾ ഉപയോഗിച്ച് ഗ്രേഡിയൻ്റ് ആംഗിൾ (ലീനിയർ) അല്ലെങ്കിൽ സ്ഥാനം (റേഡിയൽ) ക്രമീകരിക്കുക.
  4. ഔട്ട്പുട്ട് പാനലിൽ നിന്ന് ജനറേറ്റ് ചെയ്ത CSS കോഡ് പകർത്തുക.

പതിവ് ചോദ്യങ്ങള്

എല്ലാ ബ്രൗസറുകളിലും CSS ഗ്രേഡിയൻ്റുകൾ പ്രവർത്തിക്കുന്നുണ്ടോ?
Chrome, Firefox, Safari, Edge എന്നിവയുൾപ്പെടെ നിലവിലുള്ള എല്ലാ ബ്രൗസറുകളിലും ആധുനിക CSS ഗ്രേഡിയൻ്റുകൾ (ലീനിയർ-ഗ്രേഡിയൻ്റ്, റേഡിയൽ-ഗ്രേഡിയൻ്റ്) പിന്തുണയ്ക്കുന്നു. പഴയ ബ്രൗസർ പതിപ്പുകൾക്കായി ടൂളിന് ഓപ്ഷണലായി -webkit- പ്രിഫിക്സുകൾ സൃഷ്ടിക്കാൻ കഴിയും.
എനിക്ക് മൾട്ടി-കളർ ഗ്രേഡിയൻ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയുമോ?
അതെ. നിങ്ങൾക്ക് ആവശ്യമുള്ളത്ര കളർ സ്റ്റോപ്പുകൾ ചേർക്കുക. നിറങ്ങൾ ചേരുന്നത് നിയന്ത്രിക്കാൻ നിങ്ങൾക്ക് ഓരോ സ്റ്റോപ്പിൻ്റെയും സ്ഥാനം ക്രമീകരിക്കാനും കഴിയും. ഇത് സങ്കീർണ്ണമായ മഴവില്ല്, സൂര്യാസ്തമയം അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത ബ്രാൻഡ് ഗ്രേഡിയൻ്റുകളെ അനുവദിക്കുന്നു.
ലീനിയർ, റേഡിയൽ ഗ്രേഡിയൻ്റുകൾ തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?
ലീനിയർ ഗ്രേഡിയൻ്റുകൾ ഒരു നേർരേഖയിലൂടെ വർണ്ണങ്ങൾ മാറ്റുന്നു (മുകളിൽ നിന്ന് താഴേക്ക്, ഇടത്തുനിന്ന് വലത്തേക്ക്, ഡയഗണൽ അല്ലെങ്കിൽ ഏതെങ്കിലും കോണിൽ). റേഡിയൽ ഗ്രേഡിയൻ്റ് വർണ്ണങ്ങൾ വൃത്താകൃതിയിലോ ദീർഘവൃത്താകൃതിയിലോ കേന്ദ്രബിന്ദുവിൽ നിന്ന് പുറത്തേക്ക് മാറ്റുന്നു.
ടെക്സ്റ്റിൻ്റെ പശ്ചാത്തലമായി എനിക്ക് ഗ്രേഡിയൻ്റ് ഉപയോഗിക്കാമോ?
അതെ. പശ്ചാത്തല-ക്ലിപ്പ് ഉപയോഗിക്കുക: -webkit-text-fill-color ഉള്ള ടെക്സ്റ്റ്: ടെക്സ്റ്റിലേക്ക് ഗ്രേഡിയൻ്റ് പ്രയോഗിക്കാൻ സുതാര്യം. ജനറേറ്റുചെയ്‌ത CSS ഗ്രേഡിയൻ്റ് നിർവചനം നൽകുന്നു - ഗ്രേഡിയൻ്റ് ടെക്‌സ്‌റ്റിനായി ഈ ഗുണങ്ങളുമായി ഇത് സംയോജിപ്പിക്കുക.