CSS Filters

Apply visual effects like blur, brightness, and contrast to elements

Introduction to CSS Filters

CSS filters allow you to apply graphical effects like blur, brightness, contrast, and more to elements. They're commonly used for images but can be applied to any element including text, backgrounds, and borders.

.element {
  filter: function(value);
}
                    

The filter property accepts one or more filter functions. Multiple filters can be combined to create complex effects.

Basic Filter Functions

CSS provides several built-in filter functions that can be applied individually or combined.

/* Basic filter functions */
.blur { filter: blur(5px); }
.brightness { filter: brightness(150%); }
.contrast { filter: contrast(200%); }
.grayscale { filter: grayscale(100%); }
.hue-rotate { filter: hue-rotate(180deg); }
.invert { filter: invert(100%); }
.opacity { filter: opacity(50%); }
.saturate { filter: saturate(200%); }
.sepia { filter: sepia(100%); }
.drop-shadow { filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); }
                    

Combined Filters

Multiple filter functions can be combined to create more complex effects. This is commonly used for photo filters and stylistic effects.

/* Combined filters for photo effects */
.vintage {
  filter: sepia(50%) contrast(120%) brightness(90%);
}

.cold {
  filter: saturate(80%) hue-rotate(180deg) brightness(120%);
}

.warm {
  filter: sepia(30%) saturate(140%) brightness(110%);
}

.dramatic {
  filter: contrast(150%) brightness(90%) grayscale(30%);
}

.noir {
  filter: grayscale(100%) contrast(150%) brightness(80%);
}
                    

Hover Effects with Filters

Filters can be combined with hover states to create interactive effects. Hover over the images below to see the effects.

/* Hover effects with filters */
.hover-blur:hover {
  filter: blur(5px);
}

.hover-brighten:hover {
  filter: brightness(150%);
}

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

.hover-grayscale:hover {
  filter: grayscale(0%); /* Remove grayscale on hover */
}

.hover-sepia {
  filter: sepia(100%);
}

.hover-sepia:hover {
  filter: sepia(0%); /* Remove sepia on hover */
}
                    

Backdrop Filter

The backdrop-filter property applies filters to the background behind an element, creating effects like frosted glass. This is commonly used for overlays and modals.

Frosted Glass Effect

This text is on a semi-transparent background with a blur applied to the content behind it, creating a frosted glass effect.

.backdrop-filter-content {
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.3);
}
                    

Note: backdrop-filter is not supported in all browsers. Always provide a fallback for browsers that don't support it.

Filter Animations

Filters can be animated using CSS animations or transitions to create dynamic effects.

/* Filter animations */
.pulse-brightness {
  animation: pulse-brightness 3s infinite;
}

@keyframes pulse-brightness {
  0% { filter: brightness(100%); }
  50% { filter: brightness(150%); }
  100% { filter: brightness(100%); }
}

.rotate-hue {
  animation: rotate-hue 5s infinite linear;
}

@keyframes rotate-hue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
                    

Filter Best Practices

Performance: Filters can be computationally expensive, especially on mobile devices. Use them sparingly and test performance.
Accessibility: Ensure that filtered content remains accessible. For example, text should remain readable when filters are applied.
Browser Support: Check browser compatibility, especially for newer features like backdrop-filter.
Fallbacks: Provide fallbacks for browsers that don't support certain filter features.
Animations: When animating filters, use properties that are less computationally intensive (like opacity) for smoother performance.