CSS filter प्रॉपर्टी से इमेज फिल्टर (ब्लर, कंट्रास्ट, ब्राइटनेस) बनाएं

CSS filter प्रॉपर्टी का उपयोग करके इमेज पर ग्राफिकल प्रभाव जैसे ब्लर (धुंधलापन), कंट्रास्ट (विपरीतता), ब्राइटनेस (चमक), ग्रेस्केल, सेपिया, आदि लागू किए जा सकते हैं। ये प्रभाव केवल विजुअल होते हैं और मूल इमेज फाइल को नहीं बदलते।

उदाहरण

नीचे दिए गए उदाहरण में, चार इमेज पर अलग-अलग फिल्टर लागू किए गए हैं: मूल, कंट्रास्ट, ब्राइटनेस, और ब्लर।

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      height: auto;
      float: left;
    }
    .contrast {
      -webkit-filter: contrast(180%);
      filter: contrast(180%);
    }
    .brightness {
      -webkit-filter: brightness(250%);
      filter: brightness(250%);
    }
    .blur {
      -webkit-filter: blur(4px);
      filter: blur(4px);
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">
  <img class="contrast" src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">
  <img class="brightness" src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">
  <img class="blur" src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">
</body>
</html>

सामान्य CSS फिल्टर फंक्शन्स:

• blur(px): गॉसियन ब्लर
• brightness(%): चमक (100% = मूल, 0% = काला, >100% = अधिक चमकीला)
• contrast(%): विपरीतता (100% = मूल, 0% = ग्रे, >100% = अधिक विपरीत)
• grayscale(%): ग्रेस्केल (0% = मूल, 100% = पूर्ण ग्रेस्केल)
• sepia(%): सेपिया टोन
• saturate(%): संतृप्ति
• hue-rotate(deg): रंग चक्र घुमाव
• invert(%): रंग उलटना
• opacity(%): पारदर्शिता
• drop-shadow(): ड्रॉप शैडो (box-shadow के समान लेकिन अल्फा चैनल का सम्मान करता है)

नोट: -webkit-filter पुराने वेबकिट ब्राउजर्स के लिए वेंडर प्रीफिक्स है। आधुनिक ब्राउजर्स में केवल filter पर्याप्त है।