इस उपकरण के बारे में
CSS फ़िल्टर जनरेटर धुंधलापन, चमक, कंट्रास्ट, ग्रेस्केल, रंगत घुमाव, रंग उलटना, अपारदर्शिता, संतृप्ति और सेपिया प्रभाव नियंत्रित करता है। प्रीव्यू पेज के भीतर बने दृश्य तत्व इस्तेमाल करता है और दूरस्थ चित्र नहीं मँगाता।
कैसे इस्तेमाल करें
- फ़िल्टर समायोजित करने के लिए स्लाइडर खिसकाएँ या मान दर्ज करें।
- प्रीव्यू में रंगों, किनारों और अपारदर्शिता के लाइव बदलाव देखें।
- बनी हुई filter घोषणा कॉपी करें।
- सभी डिफ़ॉल्ट मान वापस लाने के लिए “रीसेट करें” पर क्लिक करें। तब आउटपुट filter: none होगा।
उदाहरण
- grayscale(100%) पूरी तरह ग्रेस्केल प्रभाव देता है।
- brightness(120%) चमक बढ़ाता है; brightness(100%) मूल चमक बनाए रखता है।
- blur(2px) किनारों को धुंधला करता है और opacity(50%) तत्व को अर्धपारदर्शी बनाता है।
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;कार्यविधि और CSS विवरण
CSS filter घोषणा के क्रम में रेंडर किए गए तत्व पर दृश्य प्रभाव लागू करता है। डिफ़ॉल्ट मान हैं: blur 0px, brightness 100%, contrast 100%, grayscale 0%, hue-rotate 0deg, invert 0%, opacity 100%, saturate 100% और sepia 0%। डिफ़ॉल्ट फ़ंक्शन छोड़े जा सकते हैं। सभी मान डिफ़ॉल्ट हों तो आउटपुट none होता है।
सामान्य उपयोग
- कार्ड, चित्र और इलस्ट्रेशन पर फ़िल्टर शैलियों की तुलना करना।
- होवर स्थिति और थीम प्रभावों के लिए CSS तैयार करना।
- कई filter फ़ंक्शन साथ लगाने से दृश्य में होने वाला बदलाव समझना।
गोपनीयता
इनपुट की प्रोसेसिंग, गणना, CSS बनाना और प्रीव्यू, सब आपके ब्राउज़र में होता है। आपकी सामग्री अपलोड नहीं होती। किसी बैकएंड, डेटाबेस, ऑनलाइन API या तीसरे पक्ष के CDN का इस्तेमाल नहीं होता और आपका इनपुट अपने आप सेव नहीं होता।
FAQ
CSS filter क्या है?
यह ब्राउज़र की दृश्य प्रभाव प्रॉपर्टी है, जिससे तत्व पर धुंधलापन, चमक, रंग और अपारदर्शिता जैसे बदलाव लागू होते हैं।
brightness(100%) का क्या अर्थ है?
यह मूल चमक बनाए रखता है। 100% से कम मान तत्व को गहरा और 100% से अधिक मान उसे चमकीला बनाते हैं।
blur() और opacity() कैसे इस्तेमाल करें?
blur() धुंधलापन नियंत्रित करने के लिए शून्य या उससे अधिक लंबाई लेता है। opacity() में अपारदर्शिता 0–100% से नियंत्रित होती है; 100% पूरी तरह अपारदर्शी है।
क्या CSS filter मूल चित्र बदल देता है?
नहीं। यह केवल ब्राउज़र में दिखने वाला रूप बदलता है। मूल चित्र फ़ाइल में कुछ लिखता या संशोधित नहीं करता।
रीसेट के बाद filter: none क्यों मिलता है?
जब सभी सेटिंग ऐसे डिफ़ॉल्ट मान पर लौटती हैं जिनका कोई प्रभाव नहीं है, तो none पूरा परिणाम व्यक्त कर देता है। हर डिफ़ॉल्ट फ़ंक्शन लिखने की ज़रूरत नहीं रहती।