backdrop-filter प्रॉपर्टी

backdrop-filter प्रॉपर्टी फिल्टर (ब्लर, कंट्रास्ट परिवर्तन, रंग प्रभाव) को तत्व के पीछे स्थित क्षेत्र पर लागू करने की अनुमति देती है। यह "कांच" या "फ्रॉस्टेड ग्लास" का प्रभाव बनाता है।

सिंटैक्स

cssसिलेक्टर {
  backdrop-filter: none | <फिल्टर> [<फिल्टर>]*;
}

मान

मान	विवरण
`none`	फिल्टर लागू नहीं होते हैं (डिफ़ॉल्ट मान)।
`blur()`	ब्लर प्रभाव लागू करता है (उदाहरण: `blur(5px)`)।
`brightness()`	पृष्ठभूमि की चमक बदलता है (उदाहरण: `brightness(0.5)`)।
`contrast()`	पृष्ठभूमि की कंट्रास्ट बदलता है (उदाहरण: `contrast(200%)`)।
`drop-shadow()`	पृष्ठभूमि में छाया जोड़ता है।
`grayscale()`	पृष्ठभूमि को ग्रेस्केल में बदलता है (उदाहरण: `grayscale(100%)`)।
`hue-rotate()`	पृष्ठभूमि के रंग टोन को बदलता है (उदाहरण: `hue-rotate(90deg)`)।
`invert()`	पृष्ठभूमि के रंगों को उलटता है (उदाहरण: `invert(100%)`)।
`opacity()`	पृष्ठभूमि की पारदर्शिता बदलता है (उदाहरण: `opacity(50%)`)।
`sepia()`	पृष्ठभूमि पर सेपिया लागू करता है (उदाहरण: `sepia(100%)`)।
`saturate()`	पृष्ठभूमि के रंगों की संतृप्ति बदलता है (उदाहरण: `saturate(200%)`)।

कई फिल्टरों को एक साथ जोड़ा जा सकता है, उन्हें स्पेस से अलग करके लिखें।

उदाहरण . साधारण ब्लर

बेसिक पृष्ठभूमि ब्लर प्रभाव:

html<div class="blur-example">
  <div class="blur-box">
    Backdrop blur effect
  </div>
</div>

css.blur-example {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 40px;
  height: 200px;
}

.blur-box {
  backdrop-filter: blur(6px);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 22px;
}

Результат:

उदाहरण . गर्म रोशनी फिल्टर

बढ़ी हुई चमक के साथ गर्म रोशनी प्रभाव:

html<div class="warm-light-bg">
  <div class="warm-light">
    Warm lighting effect
  </div>
</div>

css.warm-light-bg {
  background: url('bg.png');
  background-size: cover;
  padding: 50px;
  height: 250px;
}

.warm-light {
  backdrop-filter: brightness(1.2) hue-rotate(20deg);
  background-color: rgba(255, 235, 205, 0.3);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
  text-align: center;
  color: #333;
  font-size: 24px;
}

Результат:

उदाहरण . ग्रेडिएंट मास्क के साथ ब्लर

ब्लर और सेमी-ट्रांसपेरेंट ग्रेडिएंट का संयोजन:

html<div class="gradient-mask">
  <div class="mask-content">
    Gradient mask effect
  </div>
</div>

css.gradient-mask {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.mask-content {
  backdrop-filter: blur(10px);
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0));
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

उदाहरण . पुरानी फिल्म प्रभाव

सेपिया और ग्रेन का संयोजन:

html<div class="old-film">
  <div class="film-effect">
    Old film effect
  </div>
</div>

css.old-film {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.film-effect {
  backdrop-filter: sepia(80%) contrast(110%) brightness(90%);
  background-color: rgba(0,0,0,0.1);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

उदाहरण . ठंडा नीला फिल्टर

ठंडी रोशनी प्रभाव:

html<div class="cold-bg">
  <div class="cold-effect">
    Cool blue filter
  </div>
</div>

css.cold-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.cold-effect {
  backdrop-filter: hue-rotate(180deg) brightness(85%);
  background-color: rgba(200,230,255,0.2);
  padding: 30px;
  width: 75%;
  margin: 0 auto;
}

Результат:

उदाहरण . उच्च कंट्रास्ट

बढ़ी हुई कंट्रास्ट प्रभाव:

html<div class="contrast-bg">
  <div class="contrast-effect">
    High contrast
  </div>
</div>

css.contrast-bg {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.contrast-effect {
  backdrop-filter: contrast(200%) brightness(90%);
  background-color: rgba(0,0,0,0.1);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

उदाहरण . वॉटरकलर प्रभाव

हल्का ब्लर और बढ़ी हुई संतृप्ति:

html<div class="watercolor-bg">
  <div class="watercolor-effect">
    Watercolor effect
  </div>
</div>

css.watercolor-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.watercolor-effect {
  backdrop-filter: blur(12px) saturate(200%);
  background-color: rgba(255,255,255,0.15);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

उदाहरण . पृष्ठभूमि पर छाया

बैकग्राउंड इमेज पर शैडो प्रभाव:

html<div class="shadow-bg">
  <div class="shadow-effect">
    Drop shadow effect
  </div>
</div>

css.shadow-bg {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.shadow-effect {
  backdrop-filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
  background-color: rgba(255,255,255,0.2);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

उदाहरण . पूर्ण इनवर्जन

पृष्ठभूमि के रंगों का पूर्ण उलटाव:

html<div class="invert-bg">
  <div class="invert-effect">
    Full inversion
  </div>
</div>

css.invert-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.invert-effect {
  backdrop-filter: invert(100%);
  background-color: rgba(0,0,0,0.1);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

उदाहरण . अंधेरा प्रभाव

टेक्स्ट की पठनीयता बनाए रखते हुए पृष्ठभूमि को अंधेरा करना:

html<div class="darken-bg">
  <div class="darken-effect">
    Darkened background
  </div>
</div>

css.darken-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.darken-effect {
  backdrop-filter: brightness(40%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

उदाहरण . रंगहीनता प्रभाव

पृष्ठभूमि का पूर्ण रूप से रंगहीन होना:

html<div class="grayscale-bg">
  <div class="grayscale-effect">
    Grayscale filter
  </div>
</div>

css.grayscale-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.grayscale-effect {
  backdrop-filter: grayscale(100%);
  background-color: rgba(255,255,255,0.2);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

उदाहरण . बढ़ी हुई संतृप्ति प्रभाव

पृष्ठभूमि के रंगों को बढ़ाना:

html<div class="saturate-bg">
  <div class="saturate-effect">
    Super saturated colors
  </div>
</div>

css.saturate-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.saturate-effect {
  backdrop-filter: saturate(300%);
  background-color: rgba(255,255,255,0.1);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

उदाहरण . संयुक्त कलात्मक प्रभाव

कलात्मक प्रभाव के लिए कई फिल्टरों का संयोजन:

html<div class="artistic-bg">
  <div class="artistic-effect">
    Artistic combination
  </div>
</div>

css.artistic-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.artistic-effect {
  backdrop-filter: blur(3px) hue-rotate(90deg) saturate(150%) contrast(120%);
  background-color: rgba(255,255,255,0.15);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
  color: white;
  text-shadow: 0 0 5px black;
}

Результат:

उदाहरण . अर्द्ध-पारदर्शिता प्रभाव

पृष्ठभूमि की पारदर्शिता को नियंत्रित करना:

html<div class="opacity-bg">
  <div class="opacity-effect">
    Opacity control
  </div>
</div>

css.opacity-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.opacity-effect {
  backdrop-filter: opacity(50%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

ब्राउज़र समर्थन

यह प्रॉपर्टी अधिकांश आधुनिक ब्राउज़रों में समर्थित है, लेकिन पूर्ण क्रॉस-ब्राउज़र संगतता के लिए -webkit- प्रीफिक्स की आवश्यकता हो सकती है।

यह भी देखें

filter प्रॉपर्टी,
जो प्रभावों को स्वयं तत्व पर लागू करती है
opacity प्रॉपर्टी,
जो तत्व की पारदर्शिता को नियंत्रित करती है
background-blend-mode प्रॉपर्टी,
जो बैकग्राउंड इमेज के ब्लेंड मोड को परिभाषित करती है