CSS Filters

किसी social media पर photo post करने की कल्पना करें। publish करने से पहले, आप custom photo filters लागू कर सकते हैं: आप background को blur कर सकते हैं, brightness adjust कर सकते हैं, colors को black-and-white (grayscale) बना सकते हैं, या color hues shift कर सकते हैं। CSS filters वही social media photo filters हैं। ये आपको simple CSS properties इस्तेमाल करके सीधे अपनी webpage elements—images, banners, और text blocks सहित—पर professional image editing effects लागू करने देते हैं।

In this page:

blur से Elements को Blur करना
Brightness और Contrast Adjust करना
Grayscale में Desaturating करना
hue-rotate से Hues Rotate करना
Drop-shadow Layouts बनाम box-shadow

Syntax

css

selector {
  filter: function(value);  /* blur(), brightness(), grayscale(), ... */
}

blur से Elements को Blur करना

blur() filter किसी element पर एक soft, Gaussian blur लागू करता है। यह blur intensity define करने के लिए pixel values (जैसे 5px) accept करता है। एक higher value का मतलब है ज़्यादा blurred और out-of-focus element।

Note:

एक professional frosted-glass overlay effect बनाने के लिए अपने dialog backdrops के अंदर एक subtle blur filter इस्तेमाल करें।
Accepted values:
blur(length) — जैसे blur(4px)
brightness(number | %) — 1 unchanged है
contrast(number | %) — 1 unchanged है
grayscale(0 से 1) — 1 पूरी तरह gray है
sepia(0 से 1) — warm tone
hue-rotate(angle) — hues shift करता है
drop-shadow(x y blur color) — shape को follow करने वाली shadow
none — कोई filter नहीं (default)
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: भारी, text-filled containers को blur करना आपके content को पूरी तरह unreadable बना सकता है।

उदाहरण: Blurring Elements with blur

css

<style>
img {
  filter: blur(5px);
}
</style>
<img src="https://placehold.co/200x150" alt="Blurred image">

Brightness और Contrast Adjust करना

brightness() और contrast() filters अपने elements की lighting adjust करने के लिए percentage values (जैसे 150% या 50%) accept करते हैं। 100% से ऊपर values element को brighter बनाती हैं या contrast बढ़ाती हैं, जबकि 100% से नीचे values इसे dim या soften करती हैं।

Note:

responsive image button states बनाने के लिए hover states के अंदर subtle brightness adjustments combine करें।
Accepted values:
brightness(<number>|<percentage>) — 1 या 100% unchanged है, 0 black है
contrast(<number>|<percentage>) — 1 unchanged है, 0 flat gray है
saturate(<number>|<percentage>) — 0 gray है, 1 से ऊपर oversaturate करता है
opacity(<number>|<percentage>) — 0 से 1

Warning: extreme brightness values लागू करना detail को wash out कर सकता है और आपकी images को unreadable बना सकता है।

उदाहरण: Adjusting Brightness and Contrast

css

<style>
.bright {
  filter: brightness(150%);
}
.dim {
  filter: contrast(50%);
}
</style>
<img class="bright" src="https://placehold.co/150x100" alt="Brighter">
<img class="dim" src="https://placehold.co/150x100" alt="Lower contrast">

Grayscale में Desaturating करना

grayscale() filter किसी element के colors को desaturate करता है, उन्हें standard black-and-white tones में बदलते हुए। यह 0% (कोई बदलाव नहीं) से 100% (पूरी तरह desaturated) तक percentage values accept करता है।

Note:

अपने footer पर non-active sponsor logos को साफ़ तरीके से dim करने के लिए grayscale filter इस्तेमाल करें।
Accepted values:
grayscale(0) — original colors
grayscale(0.5) या 50% — आधा desaturated
grayscale(1) या 100% — पूरी तरह gray
sepia(<number>|<percentage>) — warm brownish tint

Warning: 100% grayscale लागू करना colored status alerts को indistinguishable बना सकता है, इसलिए इसे सावधानी से इस्तेमाल करें।

उदाहरण: Desaturating into Grayscale

css

<style>
img {
  filter: grayscale(100%);
}
</style>
<img src="https://placehold.co/150x100" alt="Grayscale logo">

hue-rotate से Hues Rotate करना

hue-rotate() filter किसी element के सभी colors को एक 360-degree color wheel के चारों ओर shift करता है, जिससे आप अपने image assets बदले बिना color themes instantly बदल सकते हैं।

Note:

अपने generic UI icons के color themes जल्दी बदलने के लिए hue-rotate इस्तेमाल करें।
Accepted values:
hue-rotate(0deg) — कोई बदलाव नहीं
hue-rotate(90deg) — hues को एक चौथाई turn shift करता है
hue-rotate(180deg) — opposite hues
hue-rotate(0.5turn) — angle units deg, rad, grad और turn accepted हैं

Warning: Hues rotate करना brand logo colors को distort कर सकता है, इसलिए official brand images पर इसका इस्तेमाल न करें।

उदाहरण: Rotating Hues with hue-rotate

css

<style>
img {
  filter: hue-rotate(90deg);
}
</style>
<img src="https://placehold.co/150x100" alt="Hue rotated icon">

Drop-shadow Layouts बनाम box-shadow

drop-shadow() filter एक ऐसी shadow जोड़ता है जो आपके element के exact outline को follow करती है, standard box-shadow property के उलट जो हमेशा एक rectangular shadow cast करती है। यह transparent PNG logos या vector paths के लिए बेहद उपयोगी है।

Note:

boxy rectangular shapes के बजाय realistic outlines cast करने के लिए transparent PNGs पर drop-shadow() filter इस्तेमाल करें।
Accepted values:
drop-shadow(<offset-x> <offset-y>) — ज़रूरी offsets
drop-shadow(... <blur-radius>) — optional blur
drop-shadow(... <color>) — optional color
नोट: box-shadow के उलट कोई spread value और कोई inset नहीं

Warning: drop-shadow filter standard box-shadows से ज़्यादा resource-heavy हो सकता है, इसलिए बड़े elements पर इसे सावधानी से इस्तेमाल करें।

उदाहरण: Drop-shadow Layouts vs. box-shadow

css

<style>
.drop {
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.4));
}
.box {
  background: white;
  padding: 16px;
  box-shadow: 4px 4px 6px rgba(0,0,0,0.4);
}
</style>
<img class="drop" src="https://placehold.co/100x100" alt="Follows the PNG outline">
<div class="box">Always a rectangle</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Shadows Next Lesson → CSS Blend Modes

CSS Filters

blur से Elements को Blur करना

Brightness और Contrast Adjust करना

Grayscale में Desaturating करना

hue-rotate से Hues Rotate करना

Drop-shadow Layouts बनाम box-shadow

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code