श्रेणी: डेवलपर टूल
CSS फ़िल्टर जनरेटर
लाइव स्लाइडर के साथ CSS फ़िल्टर डिक्लेरेशन बनाएँ
ब्लर, ब्राइटनेस, कॉन्ट्रास्ट, ग्रेस्केल, ह्यू-रोटेट, इनवर्ट, ऑपेसिटी, सैचुरेट और सीपिया को स्लाइडर से एडजस्ट करें, संयुक्त इफ़ेक्ट को लाइव प्रीव्यू में देखें, और नतीजे में मिला CSS filter डिक्लेरेशन कॉपी करें।
filter: none;
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
CSS की filter प्रॉपर्टी सोर्स इमेज को एडिट किए बिना, सीधे ब्राउज़र में ब्लर और कलर एडजस्टमेंट जैसे ग्राफ़िकल इफ़ेक्ट लगाती है। एक ही डिक्लेरेशन में कई फ़ंक्शन जोड़ना हाथ से लिखना मुश्किल होता है — यह टूल हर इफ़ेक्ट एडजस्ट करते ही आपके लिए वह स्ट्रिंग बनाता है, और सिर्फ़ उन्हीं फ़ंक्शन को शामिल करता है जिन्हें आपने असल में बदला है।
इस्तेमाल कैसे करें
- हर फ़िल्टर फ़ंक्शन एडजस्ट करने के लिए स्लाइडर खींचें।
- प्रीव्यू बॉक्स को लाइव अपडेट होते देखें।
- जनरेट हुआ filter डिक्लेरेशन अपनी स्टाइलशीट में कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या मैं इसे किसी एलिमेंट की बजाय बैकग्राउंड इमेज पर लगा सकता हूँ?
- हाँ — filter किसी भी एलिमेंट पर काम करता है, जिनमें background-image वाले एलिमेंट भी शामिल हैं। किसी एलिमेंट के पीछे के बैकग्राउंड को ही ब्लर करना हो (उसके कंटेंट को नहीं), तो backdrop-filter इस्तेमाल करें।
- क्या filter परफ़ॉर्मेंस पर असर डालता है?
- जटिल या एनिमेटेड फ़िल्टर, ख़ासकर ब्लर, बड़े आकार में रेंडर करने में महँगे पड़ सकते हैं। एनिमेटेड फ़िल्टर शिप करने से पहले उन्हीं डिवाइस पर टेस्ट करें जिन्हें आप टारगेट कर रहे हैं।
- filter फ़ंक्शन का क्रम क्यों मायने रखता है?
- हर फ़ंक्शन पिछले वाले के आउटपुट पर लागू होता है, इसलिए grayscale(100%) sepia(50%) उल्टे क्रम से अलग दिख सकता है। यह टूल इन्हें एक तय, आम समझ वाले क्रम में लागू करता है।