DevTulz Online

CSS Box Shadow ജനറേറ്റർ

പശ്ചാത്തലം


CSS Box Shadow എന്താണ്?

CSS box-shadow പ്രോപ്പർട്ടി ഒരു എലമെന്റിന്റെ ഫ്രെയിമിന് ചുറ്റും നിഴൽ ഇഫക്‌റ്റുകൾ ചേർക്കുന്നു. നിഴലുകൾ ഓഫ്‌സെറ്റ്, ബ്ലർ, സ്പ്രെഡ്, വർണ്ണം, inset (ആന്തരിക നിഴൽ) ആയി ക്രമീകരിക്കാം. കോമ-വേർതിരിച്ച ഒന്നിലധികം നിഴലുകൾ സമൃദ്ധ ഇഫക്‌റ്റുകൾക്കായി അടുക്കി വെക്കാം. ഈ ജനറേറ്റർ നിങ്ങൾക്ക് സങ്കീർണ്ണമായ ഒന്നിലധികം-ലെയർ നിഴലുകൾ ദൃശ്യപരമായി നിർമ്മിക്കാനും ക്ലിപ്‌ബോർഡിലേക്ക് ഒട്ടിക്കാൻ തയ്യാറായ CSS പകർത്താനും അനുവദിക്കുന്നു.

Box Shadow ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം

  1. നിഴൽ സ്ഥാനം നിർണ്ണയിക്കാനും ആകൃതി നൽകാനും Offset X/Y, Blur, Spread സ്ലൈഡറുകൾ ക്രമീകരിക്കുക.

  2. നിഴലിന്റെ നിറം തിരഞ്ഞെടുക്കാൻ കളർ സ്വോച്ചിൽ ക്ലിക്ക് ചെയ്യുക, സുതാര്യതയ്ക്ക് Opacity സ്ലൈഡർ ഉപയോഗിക്കുക.

  3. ആന്തരിക തിളക്കം അല്ലെങ്കിൽ അമർത്തിയ ഇഫക്‌റ്റ് സൃഷ്ടിക്കാൻ 'Inset' ടോഗിൾ ചെയ്യുക.

  4. ഒന്നിലധികം നിഴലുകൾ അടുക്കി വെക്കാൻ '+ ലെയർ ചേർക്കുക' ക്ലിക്ക് ചെയ്യുക.

  5. ജനറേറ്റ് ചെയ്ത CSS പകർത്തി നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റിൽ ഒട്ടിക്കുക.

Keywords: CSS box shadow ജനറേറ്റർ, box-shadow CSS, CSS നിഴൽ ടൂൾ, CSS drop shadow, inset shadow, മൾട്ടി-ലെയർ നിഴൽ, CSS shadow ഓൺലൈൻ