CSS Filter Generator
Apply CSS filters with live preview.
पूर्वावलोकन
.element {
filter: none;
}इस टूल के बारे में
CSS फ़िल्टर जनरेटर से आप नौ CSS फ़िल्टर फ़ंक्शन — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate और sepia — को दृश्य रूप से समायोजित कर सकते हैं और संयुक्त प्रभाव को वास्तविक समय में देख सकते हैं।
CSS फ़िल्टर HTML तत्वों पर फ़ोटो संपादन सॉफ़्टवेयर के समान दृश्य प्रभाव लागू करते हैं। ये GPU-त्वरित हैं और छवियों, पृष्ठभूमि, पाठ पर काम करते हैं।
कैसे उपयोग करें
- किसी भी स्लाइडर को खींचकर फ़िल्टर प्रभाव लागू करें।
- कई फ़िल्टर संयोजित करें — पूर्वावलोकन लाइव अपडेट होता है।
- डिफ़ॉल्ट मान वाले फ़िल्टर स्वचालित रूप से आउटपुट से बाहर किए जाते हैं।
- डिफ़ॉल्ट पर वापस जाने के लिए सभी रीसेट करें क्लिक करें।
- CSS filter प्रॉपर्टी कॉपी करने के लिए कॉपी क्लिक करें।
उपयोग के मामले
डिज़ाइनर मोनोक्रोम UI सेक्शन के लिए grayscale और sepia फ़िल्टर का उपयोग करते हैं। डेवलपर frosted-glass बैकग्राउंड के लिए blur का उपयोग करते हैं। hover प्रभावों में brightness आम है।
अक्सर पूछे जाने वाले प्रश्न
- filter और backdrop-filter में क्या अंतर है? — filter तत्व और उसके सभी बच्चों पर लागू होता है। backdrop-filter केवल तत्व के पीछे के क्षेत्र पर लागू होता है।
- क्या मैं कई फ़िल्टर संयोजित कर सकता हूँ? — हाँ। filter प्रॉपर्टी में स्पेस से अलग करके सूचीबद्ध करें। यह टूल स्वचालित रूप से करता है।
- क्या CSS फ़िल्टर प्रदर्शन को प्रभावित करते हैं? — grayscale और brightness जैसे सरल फ़िल्टर सस्ते हैं। blur अधिक महंगा है, विशेष रूप से बड़े क्षेत्रों पर।