CSS

🎯 CSS filter Property

The filter CSS property is used to apply visual effects to HTML elements such as images, backgrounds, buttons, and containers.

With filter, you can easily modify an element’s appearance by applying effects like blur, brightness, contrast, grayscale, and more.

🔹 Why Use filter?

Key Benefits
Enhances visual design without images editing.
Improves UI/UX with dynamic effects.
Works great for hover and interaction effects.
Can be combined for advanced styling.

🧩 Basic Usage

CSS


img {
    filter: none;
}

🔹 filter Functions

1️⃣ blur()

Applies a blur effect to the element. Higher values increase blur strength.

CSS


img {
    filter: blur(5px);
}

2️⃣ brightness()

Controls how bright or dark an element appears.

0% → completely dark
100% → normal
100%+ → brighter

CSS


img {
    filter: brightness(120%);
}

3️⃣ contrast()

Adjusts the contrast level of an element.

CSS


img {
    filter: contrast(140%);
}

4️⃣ drop-shadow()

Adds a shadow effect similar to box-shadow but applied to the rendered image.

CSS


img {
    filter: drop-shadow(5px 5px 10px black);
}

5️⃣ grayscale()

Converts the element to black and white.

CSS


img {
    filter: grayscale(100%);
}

6️⃣ hue-rotate()

Rotates color tones around the color wheel (0–360 degrees).

CSS


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

7️⃣ invert()

Inverts all colors of the element.

CSS


img {
    filter: invert(100%);
}

8️⃣ opacity()

Adjusts transparency level of the element.

CSS


img {
    filter: opacity(70%);
}

9️⃣ saturate()

Controls color intensity.

CSS


img {
    filter: saturate(150%);
}

🔟 sepia()

Adds a vintage brown tone effect.

CSS


img {
    filter: sepia(80%);
}

🧠 Summary
filter applies visual effects to HTML elements.
commonly used for images and UI effects.
multiple filters can be combined together.

CSS box-shadow

CSS clip

CSS

CSS