CSS फ़िल्टर जेनरेटर

CSS filter फ़ंक्शन जैसे blur, brightness, contrast, grayscale, sepia और drop-shadow को सैंपल या अपनी इमेज पर मिलाकर रियल टाइम में देखें और कोड कॉपी करें।

प्रीसेट

फ़िल्टर फ़ंक्शन

धुंधलापनpx

चमक%

कंट्रास्ट%

ग्रेस्केल%

ह्यू रोटेशनdeg

उलटा रंग%

अपारदर्शिता%

संतृप्ति%

सीपिया%

ड्रॉप शैडो

drop-shadow() जोड़ें

इमेज

अपनी इमेज इस्तेमाल करें

आपकी इमेज केवल आपके डिवाइस पर दिखाई जाती है, कभी अपलोड नहीं होती।

प्रीव्यू

CSS कोड

filter: none;

CSS फ़िल्टर जेनरेटर क्या है?

यह इमेज पर CSS filter प्रॉपर्टी रियल टाइम में लागू करता है। blur, brightness, contrast, grayscale, hue rotation, invert, opacity, saturation, sepia और drop-shadow को मिलाएं, नतीजे की मूल से तुलना करें और कोड कॉपी करें। आप बिल्ट-इन सैंपल तस्वीर या अपनी इमेज इस्तेमाल कर सकते हैं, जो आपके डिवाइस पर ही रहती है।

CSS फ़िल्टर जेनरेटर का उपयोग कैसे करें

कोई प्रीसेट (Black & white, Vintage, Warm, Cool, Dramatic…) चुनें या None से शुरू करें।
हर फ़िल्टर फ़ंक्शन के स्लाइडर हिलाएं।
ज़रूरत हो तो drop-shadow() चालू करें और उसके ऑफ़सेट, ब्लर, रंग और ओपेसिटी सेट करें।
लोकल फ़ाइल से परखने के लिए Use your own image क्लिक करें।
CSS कोड कॉपी करें।

उदाहरण

इनपुट

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

आउटपुट

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

CSS फ़िल्टर जेनरेटर का उपयोग कब करें

इसे इमेज होवर इफ़ेक्ट, एकसमान फ़ोटो स्टाइल, धुँधले बैकग्राउंड और पारदर्शी PNG/SVG आकारों का पालन करने वाली शैडो (drop-shadow) के लिए इस्तेमाल करें। यह इमेज फ़ाइल को खुद नहीं बदलता; स्थायी बदलाव के लिए इमेज एडिटर या साइट के इमेज टूल इस्तेमाल करें। एलिमेंट के बजाय उसके पीछे की चीज़ को प्रभावित करने के लिए backdrop-filter इस्तेमाल करें (Glassmorphism Generator देखें)।

CSS फ़िल्टर जेनरेटर कैसे काम करता है

सिर्फ़ वे फ़ंक्शन लिखे जाते हैं जो अपनी न्यूट्रल वैल्यू से अलग हों (जैसे brightness 100% पर छोड़ दी जाती है), एक तय क्रम में: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow। CSS में क्रम मायने रखता है क्योंकि हर फ़ंक्शन पिछले के आउटपुट पर लागू होता है। कुछ न बदला हो तो आउटपुट filter: none; होता है। आपकी इमेज लोकल object URL से दिखाई जाती है और कभी अपलोड नहीं होती।