🧪 CSS Tutorial: filter

📌 Introduction

The filter property in CSS allows you to apply visual effects to elements— such as blurring, brightness adjustments, contrast, color shifts, and much more. Filters are commonly used on images, backgrounds, cards, UI components, and hover animations. Think of filter as applying “Instagram-style effects” directly with CSS. 🎨✨

🎯 What Does filter Do?

  • Applies graphical effects like blur, grayscale, brightness, etc.
  • Can apply multiple filters at once
  • Works on images, videos, backgrounds, and any element
  • Useful for hover effects and dynamic UI

✨ Syntax

Syntax

selector {
  filter: <filter-function> <filter-function> ...;
}

Note

Filters are applied **from left to right**. You can combine multiple filter functions.

🧩 Available Filter Functions

1. blur()

Adds a Gaussian blur.

Code Snippet

filter: blur(5px);

2. brightness()

Controls brightness. Values above 1 increase brightness.

Code Snippet

filter: brightness(1.5);

3. contrast()

Changes contrast (similar to photo editing).

Code Snippet

filter: contrast(200%);

4. grayscale()

Converts the element to grayscale.

Code Snippet

filter: grayscale(100%);

5. hue-rotate()

Rotates colors around the color wheel.

Code Snippet

filter: hue-rotate(90deg);

6. invert()

Inverts colors (negative effect).

Code Snippet

filter: invert(100%);

7. opacity()

Controls opacity but only visually (doesn’t affect element stacking).

Code Snippet

filter: opacity(40%);

8. saturate()

Increases or decreases color saturation.

Code Snippet

filter: saturate(250%);

9. sepia()

Applies sepia (a vintage yellow-brown style).

Code Snippet

filter: sepia(100%);

10. drop-shadow()

Applies a shadow similar to box-shadow but only around the visible parts of the element.

Code Snippet

filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));

🔥 Combining Multiple Filters

Multiple Filters

img {
  filter: brightness(1.2) contrast(110%) saturate(150%) blur(2px);
}

🔥 Practical Examples

1. Hover Blur Effect

Hover Blur

img:hover {
  filter: blur(4px);
}

2. Darken Background Image

Darkened Background

.banner {
  filter: brightness(0.5);
}

3. Neon Glow Using drop-shadow()

Neon Glow

.neon {
  filter: drop-shadow(0 0 10px #00ffff);
}

4. Instagram-Style Image Effect

Instagram Filter

.photo {
  filter: brightness(1.1) contrast(120%) saturate(140%);
}

5. Blur Background Without Affecting Text

Note

Use backdrop-filter for actual background blurring, not filter.

Backdrop Blur

.glass {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.35);
}

📊 Filter Function Reference Table

FunctionDescription
blur()Applies soft blur
brightness()Bright/dim effect
contrast()Boost or reduce contrast
grayscale()Black & white
hue-rotate()Color shifting
invert()Negative effect
opacity()Transparency effect
saturate()Color intensity
sepia()Vintage effect
drop-shadow()Shadow on visible parts only

🧠 Tips & Best Practices

  • Filters can be expensive on performance — use sparingly
  • Use transitions for smooth hover animations
  • Combine multiple filters for cool custom effects
  • Use backdrop-filter when you want to blur the background only
  • Use drop-shadow() instead of box-shadow for PNG/SVG glow effects
>>“Filters transform simple elements into visually rich components — experiment and create your own effects.” ✨

🎉 Conclusion

The filter property is one of the most creative tools in CSS. Whether you need subtle UI enhancements, dramatic hover animations, or photorealistic effects, filters give you flexibility and expressive power. Master each filter type, then mix and match to build stunning designs. 🚀