CSS फ़िल्टर जनरेटर
स्लाइडर के साथ CSS filter प्रॉपर्टीज़ समायोजित करें और वास्तविक समय में परिणाम देखें। उत्पन्न कोड कॉपी करें।
फ़िल्टर नियंत्रण
पूर्वावलोकन
जनरेट किया गया CSS
कैसे उपयोग करें
- फ़िल्टर स्लाइडर समायोजित करें: ब्लर, चमक, कंट्रास्ट, सैचुरेशन, ह्यू रोटेट, अपारदर्शिता, ग्रेस्केल, सेपिया और उल्टा नियंत्रित करने के लिए स्लाइडर का उपयोग करें।
- वास्तविक समय में पूर्वावलोकन करें: जब आप स्लाइडर घुमाते हैं, नमूना छवि या तत्व तुरंत अपडेट होता है।
- CSS कॉपी करें: पूरी filter प्रॉपर्टी मान (जैसे filter: brightness(1.2) contrast(1.5) saturate(0.8)) आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार है।
CSS फ़िल्टर जनरेटर क्यों इस्तेमाल करें?
CSS फ़िल्टर छवि-प्रसंस्करण प्रभाव (ब्लर, कंट्रास्ट, चमक, रंग शिफ़्ट) सीधे ब्राउज़र में लागू करने देते हैं।
विशेषताएँ
- सभी CSS फ़िल्टर फ़ंक्शन: blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert और drop-shadow।
- लाइव पूर्वावलोकन: नमूना छवि या अपनी छवि पर वास्तविक समय में परिवर्तन देखें।
- मान सत्यापन: स्लाइडर प्रत्येक फ़िल्टर फ़ंक्शन के लिए वैध श्रेणियाँ लागू करते हैं।
- व्यक्तिगत रीसेट: एक फ़िल्टर को दूसरों को छुए बिना उसके डिफ़ॉल्ट मान पर वापस लाएँ।
- संयुक्त आउटपुट: सभी चयनित फ़िल्टर एक filter स्ट्रिंग में संयुक्त होते हैं।
अक्सर पूछे जाने वाले प्रश्न
क्या CSS फ़िल्टर को वीडियो पर लागू किया जा सकता है?
हाँ। CSS filter प्रॉपर्टी किसी भी तत्व पर काम करती है, जिसमें <video>, <img>, <div> और <canvas> शामिल हैं। एक वीडियो पर लागू होने पर, फ़िल्टर को प्लेबैक के दौरान वास्तविक समय में रेंडर किया जाता है।
filter और backdrop-filter में क्या अंतर है?
filter प्रभाव को तत्व पर और उसके सभी बच्चों पर लागू करता है। backdrop-filter प्रभाव को तत्व के पीछे (नीचे) की सामग्री पर लागू करता है, आमतौर पर फ़्रॉस्टेड ग्लास प्रभाव के लिए उपयोग किया जाता है।
क्या CSS फ़िल्टर प्रदर्शन को प्रभावित करते हैं?
ब्लर या जटिल कंपोज़िटिंग वाले फ़िल्टर GPU पर भारी हो सकते हैं। एनिमेटेड फ़िल्टर के लिए, सुनिश्चित करें कि तत्व अपनी स्वयं की कंपोज़िटिंग परत पर है (संकेत के रूप में transform: translateZ(0) जोड़ें)। छवियों और आइकनों पर स्थिर फ़िल्टर का न्यूनतम प्रभाव होता है।