ड्रॉप-शैडो फ़ंक्शन

drop-shadow फ़ंक्शन बैकग्राउंड इमेज को शैडो जोड़ने की अनुमति देता है।

सिंटैक्स

cssसिलेक्टर {
  filter: drop-shadow(x-अक्ष पर शिफ्ट, y-अक्ष पर शिफ्ट, ब्लर रेडियस, रंग);
}

मान

मान	विवरण
x-अक्ष पर शिफ्ट	बैकग्राउंड के सापेक्ष क्षैतिज रूप से शैडो का ऑफ़सेट। धनात्मक संख्या शैडो को दाईं ओर शिफ्ट करती है, ऋणात्मक - बाईं ओर। अनिवार्य पैरामीटर।
y-अक्ष पर शिफ्ट	बैकग्राउंड के सापेक्ष ऊर्ध्वाधर रूप से शैडो का ऑफ़सेट। धनात्मक संख्या शैडो को नीचे की ओर शिफ्ट करती है, ऋणात्मक - ऊपर की ओर। अनिवार्य पैरामीटर।
ब्लर रेडियस	शैडो के ब्लर रेडियस को सेट करता है। मान जितना अधिक होगा, शैडो उतनी ही अधिक ब्लर होगी। वैकल्पिक पैरामीटर। डिफ़ॉल्ट रूप से `0` के बराबर।
रंग	शैडो का रंग। वैकल्पिक पैरामीटर। डिफ़ॉल्ट रूप से शैडो का रंग काला सेट होता है।

उदाहरण

आइए हम अपनी इमेज के लिए एक नीली शैडो सेट करें जो अक्षों के साथ शिफ्ट न हो, 5px ब्लर रेडियस के साथ:

html<div id="elem"></div>

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

यह भी देखें

blur फ़ंक्शन,
जो बैकग्राउंड को ब्लर करता है
brightness फ़ंक्शन,
जो बैकग्राउंड की चमक सेट करता है
contrast फ़ंक्शन,
जो बैकग्राउंड के कंट्रास्ट को सेट करता है
hue-rotate फ़ंक्शन,
जो बैकग्राउंड के ह्यू को सेट करता है
invert फ़ंक्शन,
जो बैकग्राउंड के रंगों को इनवर्ट करता है
opacity फ़ंक्शन,
जो बैकग्राउंड की पारदर्शिता सेट करता है
sepia फ़ंक्शन,
जो बैकग्राउंड को सेपिया में बदलता है
background प्रॉपर्टी,
जो बैकग्राउंड के लिए एक शॉर्टहैंड प्रॉपर्टी है
background-image प्रॉपर्टी,
जिसका उपयोग करके किसी ब्लॉक को बैकग्राउंड इमेज दी जा सकती है