CSS Filter — Blur, Grayscale, Sepia Photo Effect सीखें
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
कोई photo app खोलिए और एक फ़िल्टर दबाइए: एक tap photo को black-and-white बना देता है, दूसरा उसे गर्म और पुराना दिखाता है, तीसरा उसे धुंधला कर देता है। CSS एक ही line में वही ताक़त देता है। filter property पूरे element पर visual effect लगाती है — image, box, यहाँ तक कि text के block पर भी — बिना element को या उसके आस-पास की चीज़ों को बदले।
फ़िल्टर क्या करता है
फ़िल्टर element के बनने के बाद उसके pixels बदल देता है। Element का size और position वही रहता है; सिर्फ़ दिखावा बदलता है। इसीलिए फ़िल्टर इस्तेमाल करना इतना आसान है: page दोबारा नहीं सजाना, बस जो पहले से है उसे नया रूप देना। एक ज़रूरी नियम — parent पर फ़िल्टर उसके अंदर की हर चीज़ पर भी लगता है, और child parent का फ़िल्टर हटा नहीं सकता।
फ़िल्टर के फ़ंक्शन
हर फ़िल्टर एक function है, एक value के साथ। सबसे काम के ये हैं:
.soft { filter: blur(3px); }
.bright { filter: brightness(1.5); }
.old { filter: sepia(80%); }
.grey { filter: grayscale(100%); }
.strong { filter: contrast(150%); }
blur() किनारों को नरम करता है, pixels में नापा जाता है। brightness() number लेता है — 1 normal है, 1.5 ज़्यादा उजला, 0.5 कम। sepia(), grayscale() और contrast() percentages लेते हैं। और भी हैं — saturate() रंग की गहराई के लिए, hue-rotate() रंगों को चक्कर पर घुमाने के लिए, और invert() photo negative के लिए — लेकिन ऊपर वाले पाँच ज़्यादातर designs के लिए काफ़ी हैं।
फ़िल्टर जोड़ना और hover वाली चाल
फ़िल्टर एक line में जुड़ते हैं, space से अलग करके: filter: grayscale(100%) contrast(120%); से photo तेज़ black-and-white बन जाती है। Portfolio की classic चाल यह है कि photo grayscale से शुरू होती है और hover पर रंग वापस लाती है: img { filter: grayscale(100%); } और img:hover { filter: grayscale(0%); }। transition जोड़ दीजिए और रंग एकदम से बदलने के बजाय आराम से वापस आता है। backdrop-filter भी है, जो element के पीछे जो है उसे धुंधला करता है — आधुनिक menus और cards पर दिखने वाला frosted-glass effect।
आम गलतियाँ
- एक rule में दो
filterlines लिखना — दूसरी जीत जाती है; उन्हें एक ही line में जोड़िए। - unit भूलना — बिना
pxकेblur(3)और बिना%केsepia(80)दोनों गलत हैं। brightness(150%)लिखना — brightness1.5जैसा सादा number लेता है, percentage नहीं।- filtered parent के child से फ़िल्टर हटाने की कोशिश — child पहले से filtered तस्वीर के अंदर है, बाहर नहीं निकल सकता।
- बड़े areas पर ज़्यादा blur — बड़ी image पर भारी blur सस्ते phones पर धीरे बनता है, इसलिए blur छोटा रखिए।
याद रखें
filterelement के pixels बदलता है, उसका size या position नहीं।blur()नरम करता है,brightness()उजला या धुंधला करता है,grayscale()रंग हटा देता है,sepia()photo को पुराना बना देता है।- फ़िल्टर एक line में जुड़ते हैं, space से अलग करके।
- parent का फ़िल्टर सारे children पर लगता है, और child उसे हटा नहीं सकता।
- hover पर grayscale से रंग वापस आना portfolio की classic चाल है — smooth fade के लिए transition जोड़िए।
उदाहरण समझिए
.blur { filter: blur(3px); }— पहला box हल्का धुंधला है, जैसे photo थोड़ा out of focus ली गई हो।.bright { filter: brightness(1.5); }— दूसरा box डेढ़ गुना उजला है, इसलिए उसका रंग सफ़ेद की तरफ़ धुल गया लगता है।.gray { filter: grayscale(100%); }— तीसरा box पूरा रंग खोकर सिर्फ़ black-and-white रह जाता है।.sepia { filter: sepia(80%); }— चौथा box गर्म और भूरा हो जाता है, जैसे पुरानी album की photo।.portrait:hover { filter: grayscale(0%); }— बड़ा box black-and-white से शुरू होता है और browser में hover करने पर पूरा रंग वापस पा लेता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Photo Filters in CSS</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f2f2f2; }
h1 { text-align: center; color: #333; }
.row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 900px; margin: auto; }
.photo {
width: 200px; height: 140px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 18px; font-weight: bold;
background-color: #ff9800;
}
.blur { filter: blur(3px); }
.bright { filter: brightness(1.5); background-color: #e91e63; }
.gray { filter: grayscale(100%); background-color: #2196f3; }
.sepia { filter: sepia(80%); background-color: #04aa6d; }
.contrast { filter: contrast(150%); background-color: #9c27b0; }
.portrait {
width: 260px; height: 160px; margin: 30px auto; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 20px; font-weight: bold;
background-color: #2196f3;
filter: grayscale(100%);
}
.portrait:hover { filter: grayscale(0%); }
p.note { text-align: center; color: #666; max-width: 600px; margin: 20px auto; }
</style>
</head>
<body>
<h1>One Line, A New Mood</h1>
<div class="row">
<div class="photo blur">Blur</div>
<div class="photo bright">Bright</div>
<div class="photo gray">Grayscale</div>
<div class="photo sepia">Sepia</div>
<div class="photo contrast">Contrast</div>
</div>
<div class="portrait">Hover over me</div>
<p class="note">Each box shows a colour with a different filter. The last box is black-and-white until you hover over it in a browser — then its colour returns.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. Filter प्रॉपर्टी क्या करती है?
यह पूरे एलिमेंट पर visual effect लगाती है — इमेज, बॉक्स, या टेक्स्ट ब्लॉक पर — उसके pixels बदलती है, साइज़ या position नहीं।
2. Grayscale और sepia क्या करते हैं?
grayscale() रंग हटा कर फ़ोटो को black-and-white बना देता है, और sepia() उसे गर्म, पुरानी सी look देता है।
3. क्या बच्चा अपने पैरेंट का फ़िल्टर हटा सकता है?
नहीं। पैरेंट का फ़िल्टर सभी बच्चों पर लगता है, और कोई बच्चा उससे बच नहीं सकता।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
