CSS Image Filters

Image Filters

CSS filters let you apply visual effects to elements (especially images) without editing the image file. Filters are commonly used for hover effects, thumbnails, hero images, and UI states.

Filters are applied using the filter property:

img {
  filter: grayscale(100%);
}

You can also apply filters to containers, icons, and other elements (not only images).

Common Filter Functions

The filter property supports multiple functions. You can combine them by separating with spaces.

Grayscale:

.img-gray {
  filter: grayscale(100%);
}

Blur:

.img-blur {
  filter: blur(3px);
}

Brightness and contrast:

.img-contrast {
  filter: brightness(1.1) contrast(1.15);
}

Saturate and sepia:

.img-warm {
  filter: saturate(1.3) sepia(35%);
}

Hue rotate:

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

Drop shadow: Unlike box-shadow, drop-shadow() follows the visible shape of transparent PNGs/SVGs.

.icon {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

Combining filters:

.img-mix {
  filter: grayscale(20%) contrast(1.1) brightness(1.05);
}

Tip: Filters can be expensive on very large images. Use them carefully for performance, especially on mobile.

Hover Filter Effects

Filters are often used on hover to add subtle interaction feedback.

Fade-in color (from grayscale):

.gallery img {
  filter: grayscale(100%);
  transition: filter .2s ease;
}

.gallery img:hover {
  filter: grayscale(0%);
}

Hover focus effect:

.card img {
  filter: brightness(.9);
  transition: filter .2s ease, transform .2s ease;
}

.card:hover img {
  filter: brightness(1.05);
  transform: scale(1.03);
}

Blur background image while keeping overlay text sharp:

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(2px) brightness(.9);
  transform: scale(1.03);
}

.hero .content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

Summary

• Use filter to apply visual effects like blur, grayscale, contrast, and hue shifts.
• Combine multiple filters by separating functions with spaces.
• Use drop-shadow() when you want a shadow that follows transparent shapes.
• Filters are great for hover effects, but can be heavy on large images.