Filters and Blend Modes

🧑‍🏫 Sabse pehle — simple mein samjho#

Image editing apps (jaise Photoshop ya Instagram) mein hum blur, brightness, aur contrast set karte hain. Ye sab hum CSS (Tailwind) ke zariye directly browsers mein kar sakte hain. Dusri sabse popular cheez hai Glassmorphism (shishe jaisa design jisme piche ka background blur dikhta hai). Iske liye backdrop-blur use hota hai, jo aajkal har premium website (aur Apple UI) ki pehchaan hai!

Filters (Applied to the Element Itself)#

Filters manipulate how an element (usually an image) renders on the screen. Like transforms, in modern Tailwind you don't need a base filter class, you just apply the specific utility.

• Blur: blur-sm, blur-md, blur-lg (Great for obscuring background images).
• Brightness: brightness-50 (Darken), brightness-150 (Brighten).
• Grayscale: grayscale (Turns images black and white).
• Invert: invert (Inverts colors).

Drop Shadow vs Box Shadow#

shadow-lg (Box Shadow) draws a rectangular shadow box around the container. drop-shadow-lg (Filter) analyzes the actual shape of the element (e.g., an SVG icon or an image with a transparent background) and draws the shadow following its exact outline!

Backdrop Filters (Glassmorphism 🍷)#

Backdrop filters don't affect the element itself; they affect what is behind the element. This is how you achieve the frosted glass aesthetic.

The element applying the backdrop filter MUST have a semi-transparent background color (using opacity).

<!-- The Glassmorphism Recipe -->
<div class="relative max-w-sm mx-auto h-64 bg-cover bg-center rounded-2xl overflow-hidden shadow-2xl" style="background-image: url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?auto=format&fit=crop&q=80&w=600');">
  <!-- We place the glass box inside the parent with absolute positioning -->
  <div class="absolute bottom-4 left-4 right-4 bg-white/20 backdrop-blur-md border border-white/30 p-4 rounded-xl shadow-lg">
    <h3 class="text-white font-bold m-0 text-lg">Frosted Glass</h3>
    <p class="text-white/90 text-sm m-0 mt-1">backdrop-blur-md & bg-white/20</p>
  </div>
</div>

• backdrop-blur-sm, backdrop-blur-md, backdrop-blur-lg
• backdrop-brightness-75, backdrop-contrast-125

Mix Blend Modes#

Blend modes determine how an element's colors interact and blend with the colors of the element sitting directly behind it.

• mix-blend-multiply (Darkens the underlying layers)
• mix-blend-screen (Lightens the underlying layers)
• mix-blend-overlay (Increases contrast)

This is incredibly useful for overlaying text on complex background images or creating duotone effects without Photoshop.

<!-- Try changing mix-blend-multiply to mix-blend-screen or mix-blend-overlay! -->
<div class="max-w-sm mx-auto flex justify-center items-center h-48 bg-gray-50 rounded-2xl border border-gray-200">
  <div class="relative flex">
    <div class="w-24 h-24 bg-cyan-400 rounded-full mix-blend-multiply opacity-80 absolute -left-8 -top-4"></div>
    <div class="w-24 h-24 bg-magenta-400 bg-fuchsia-500 rounded-full mix-blend-multiply opacity-80 z-10"></div>
    <div class="w-24 h-24 bg-yellow-400 rounded-full mix-blend-multiply opacity-80 absolute left-8 -top-4"></div>
  </div>
</div>