CSS Filters Explained: A Practical Guide to Image Effects

CSS filters let you apply Photoshop-like effects directly in the browser. No image editing required — just pure CSS.

Available Filter Functions

Here are all the CSS filter functions you can use:

filter: blur(5px);           /* Gaussian blur */
filter: brightness(1.2);     /* Lighten or darken */
filter: contrast(1.5);       /* Increase/decrease contrast */
filter: grayscale(1);         /* Convert to grayscale */
filter: saturate(2);          /* Boost or reduce colors */
filter: sepia(0.8);           /* Warm vintage tone */
filter: hue-rotate(90deg);   /* Shift all colors */
filter: invert(1);            /* Invert all colors */
filter: opacity(0.5);         /* Transparency */
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));

Combining Filters

The real power comes from combining multiple filters:

.vintage-photo {
  filter: sepia(0.4) contrast(1.2) brightness(1.1) saturate(1.3);
}

.dramatic {
  filter: contrast(1.4) brightness(0.9) saturate(1.5);
}

.faded {
  filter: saturate(0.5) brightness(1.1) contrast(0.9);
}

Order matters — filters are applied left to right, so brightness(2) contrast(0.5) gives a different result than contrast(0.5) brightness(2).

Hover Effects

Filters work beautifully with transitions for interactive effects:

.card-image {
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.card-image:hover {
  filter: grayscale(0);
}

This grayscale-to-color reveal is a popular design pattern for portfolio pages.

filter vs backdrop-filter

• filter applies effects to the element itself (and its children)
• backdrop-filter applies effects to the area behind the element

/* Blurs the element */
.blurred { filter: blur(4px); }

/* Blurs what's behind the element (glassmorphism) */
.glass { backdrop-filter: blur(16px); }

Performance Tips

1. Use will-change: filter for animated filters to enable GPU acceleration
2. Avoid large blur values on big elements — blur(100px) is expensive
3. Prefer opacity property over filter: opacity() when possible — it's faster

Experiment with all these filters in our CSS Filter Generator — adjust values in real-time and copy the code when you're happy.