CSS Filters & Effects Kya Hote Hai?

Bina Image Editor ke Apne Web Elements ko Visually Enhance Karein

Introduction to CSS Filters

CSS filter property ka use karke hum elements (khaaskar images) par graphical effects apply kar sakte hain. Yeh humein blur, brightness, contrast, aur saturation jaise effects ko direct CSS se control karne ki power deta hai, jiske liye pehle image editing software ki zaroorat padti thi.

Common Filter Functions

1. blur()

Yeh filter element ko dhundhla (blur) kar deta hai. Value pixels (px) me di jaati hai.

img { filter: blur(5px); }

2. brightness()

Yeh filter element ki brightness (chamak) ko control karta hai. 100% normal hota hai.

img { filter: brightness(150%); }

3. contrast()

Yeh filter element ke colors ke beech ke contrast ko adjust karta hai. 100% normal hota hai.

img { filter: contrast(200%); }

4. drop-shadow()

Yeh box-shadow ki tarah hi kaam karta hai, lekin yeh element ke actual shape (transparent parts ko chhodkar) par shadow apply karta hai.

img { filter: drop-shadow(8px 8px 10px gray); }

5. grayscale()

Yeh filter element ko black and white (monochrome) bana deta hai. 100% ka matlab hai poori tarah se grayscale.

img { filter: grayscale(100%); }

6. hue-rotate()

Yeh filter element ke colors ko color wheel par rotate karta hai. Value degrees (deg) me di jaati hai.

img { filter: hue-rotate(90deg); }

7. invert()

Yeh filter element ke colors ko ulta (negative) kar deta hai. 100% ka matlab hai poora inversion.

img { filter: invert(100%); }

8. opacity()

Yeh filter element ki transparency control karta hai. 100% poori tarah se visible hota hai.

img { filter: opacity(50%); }

9. saturate()

Yeh filter color ki intensity (saturation) ko control karta hai. 100% normal saturation hota hai.

img { filter: saturate(200%); }

10. sepia()

Yeh filter element ko ek purana, brownish (sepia) look deta hai. 100% ka matlab hai poora sepia effect.

img { filter: sepia(100%); }

Combining Multiple Filters

Aap ek saath multiple filter functions ko space se separate karke apply kar sakte hain.

img { filter: blur(2px) brightness(120%) saturate(150%); }

Key Takeaways

  • CSS filters se aap images aur doosre elements par visual effects apply kar sakte hain.
  • blur(), brightness(), contrast(), aur grayscale() sabse common filters hain.
  • drop-shadow() filter complex shapes (jaise transparent PNGs) par shadow lagane ke liye behtar hai.
  • Aap ek hi filter property me multiple functions ko chain kar sakte hain.
  • Filters ko transitions aur animations ke saath combine karke aap interactive hover effects bana sakte hain.
Bonus: Practical Application!
Apne webpage par aaj hi filter effects ka use karke dekhein!

Ek image par hover karke use grayscale se color me change karne ka effect banayein.

Practice in CSS Editor
Test Your Knowledge!
Kya aap CSS Filters & Effects ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz