🎨 CSS Filter Effects — Visual Styling Power

Last Updated: November 2025

The CSS filter property adds visual effects to images, backgrounds, or any element — like blur, brightness, contrast, grayscale, hue rotation, and more.

🗣 Hinglish Tip: Filter ka matlab — “element par photo editing jaisi effects lagana CSS se.”

Syntax

selector {
  filter: function(value);
}

Multiple filters can be applied together:

filter: brightness(120%) contrast(90%) saturate(150%);

Common Filter Functions

Function	Description	Example
blur(px)	Adds a Gaussian blur	filter: blur(5px);
brightness(%)	Controls brightness (100% = normal)	filter: brightness(150%);
contrast(%)	Increases/decreases contrast	filter: contrast(80%);
grayscale(%)	Makes image black & white	filter: grayscale(100%);
sepia(%)	Gives old brownish effect	filter: sepia(70%);
hue-rotate(deg)	Rotates colors	filter: hue-rotate(90deg);
invert(%)	Inverts colors	filter: invert(100%);
saturate(%)	Controls color intensity	filter: saturate(200%);
opacity(%)	Controls transparency	filter: opacity(70%);
drop-shadow(x y blur color)	Adds realistic shadow	filter: drop-shadow(10px 10px 5px gray);

Blur Effects

.blur {
  filter: blur(5px);
}

Brightness Effects

.bright {
  filter: brightness(150%);
}

Brightness + Contrast

.adjust {
  filter: brightness(120%) contrast(80%);
}

Drop Shadow

.shadow {
  filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.5));
}

Multiple Filters

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

🧪 Example: Blur + Overlay

<div class="overlay">
  <p>Welcome to CSS Effects!</p>
</div>

<style>
  .overlay {
    width: 300px;
    height: 200px;
    background: url("https://picsum.photos/300/200") center/cover no-repeat;
    position: relative;
  }

  .overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.3);
  }

  .overlay p {
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
    top: 40%;
  }
</style>

🗣 Hinglish Tip: backdrop-filter blur karta hai background ke through, jabki filter image ke upar apply hota hai.

← Previous Next →