Filter effect

Filter effects are a powerful visual processing tool in CSS3 that enable various visual effects directly through code without modifying the original image or element. From blurring to color adjustments, filters provide more creative possibilities for web design.

Basic Syntax and Usage

CSS filters are implemented using the filter property, with the following basic syntax:

.element {
  filter: <filter-function> [<filter-function>]*;
}

Multiple filter functions can be combined, separated by spaces. For example, applying both blur and brightness adjustments simultaneously:

.image {
  filter: blur(2px) brightness(120%);
}

Detailed Explanation of Common Filter Functions

Blur Effect (blur)

The blur() function creates a Gaussian blur effect, where a larger parameter value results in more blur:

.blur-effect {
  filter: blur(5px);
}

Practical Example - Creating a frosted glass background effect:

<div class="glass-container">
  <div class="blur-background"></div>
  <div class="content">Transparent Content Area</div>
</div>

.glass-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.blur-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  filter: blur(8px);
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.3);
  padding: 20px;
}

Brightness Adjustment (brightness)

brightness() controls the brightness of an element, where 1 represents the original brightness:

.dark-image {
  filter: brightness(0.6);
}

.bright-image {
  filter: brightness(1.5);
}

Contrast Adjustment (contrast)

contrast() adjusts image contrast:

.high-contrast {
  filter: contrast(200%);
}

.low-contrast {
  filter: contrast(50%);
}

Drop Shadow Effect (drop-shadow)

A shadow effect that better conforms to the actual shape of the image compared to box-shadow:

.shadow-effect {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

Comparison with box-shadow example:

<div class="box-shadow">box-shadow effect</div>
<div class="drop-shadow">drop-shadow effect</div>
<img src="star.png" class="box-shadow">
<img src="star.png" class="drop-shadow">

.box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.drop-shadow {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

Grayscale Conversion (grayscale)

Converts an image to grayscale, where 1 represents full grayscale:

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

.partial-grayscale {
  filter: grayscale(30%);
}

Hue Rotation (hue-rotate)

Changes the hue of an image, with the parameter as an angle value:

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

Creating a color cycle animation:

.color-cycle {
  animation: hueRotate 5s infinite;
}

@keyframes hueRotate {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

Color Inversion (invert)

Inverts the colors of an image, where 1 represents full inversion:

.inverted {
  filter: invert(100%);
}

.partial-invert {
  filter: invert(50%);
}

Opacity Adjustment (opacity)

Similar to the opacity property but may differ in performance impact:

.translucent {
  filter: opacity(30%);
}

Saturation Adjustment (saturate)

Controls image saturation:

.oversaturated {
  filter: saturate(300%);
}

.desaturated {
  filter: saturate(30%);
}

Sepia Effect (sepia)

Creates a vintage sepia effect:

.vintage {
  filter: sepia(100%);
}

Compound Filter Effects

Multiple filters can be combined to create complex effects:

.complex-effect {
  filter: contrast(150%) brightness(120%) saturate(200%) hue-rotate(15deg);
}

Vintage photo effect example:

.vintage-photo {
  filter: sepia(80%) contrast(120%) brightness(90%) saturate(120%) hue-rotate(-10deg);
}

Combining SVG Filters with CSS

CSS can reference SVG filters for more complex effects:

1. Define an SVG filter:

<svg>
  <filter id="custom-filter">
    <feGaussianBlur stdDeviation="5" />
    <feColorMatrix type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         0 0 0 9 -4" />
  </filter>
</svg>

2. CSS reference:

.svg-filter {
  filter: url('#custom-filter');
}

Performance Considerations and Optimization

While filter effects are powerful, they may impact page performance:

1. Avoid using filters on a large number of elements
2. Consider using pre-processed images for static effects
3. Use the will-change property to optimize animation performance:

.animated-filter {
  filter: blur(0);
  transition: filter 0.3s ease;
  will-change: filter;
}

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

Browser Compatibility and Progressive Enhancement

Although modern browsers generally support CSS filters, compatibility solutions should be considered:

.filtered {
  /* Fallback style */
  opacity: 0.8;
  
  /* Modern browsers */
  @supports (filter: blur(2px)) {
    opacity: 1;
    filter: blur(2px) brightness(1.1);
  }
}

Creative Application Examples

Image Hover Effects

.gallery-img {
  transition: filter 0.3s;
  filter: sepia(30%) saturate(80%);
}

.gallery-img:hover {
  filter: sepia(0%) saturate(120%) contrast(110%);
}

Text Effects

.text-effect {
  color: #fff;
  text-shadow: 0 0 10px #fff;
  filter: blur(0.5px) brightness(1.2);
}

Video Filters

.filtered-video {
  filter: contrast(120%) hue-rotate(10deg);
}

Combining with Blend Modes

Filters can be combined with mix-blend-mode to create more effects:

.combined-effect {
  filter: brightness(1.2);
  mix-blend-mode: multiply;
}

Applications in Responsive Design

Adjust filter intensity via media queries:

.adaptive-image {
  filter: brightness(100%);
}

@media (max-width: 768px) {
  .adaptive-image {
    filter: brightness(120%);
  }
}

Dynamic Filter Control

Change filters dynamically with JavaScript:

const element = document.querySelector('.dynamic-filter');
let hueValue = 0;

function updateFilter() {
  hueValue = (hueValue + 2) % 360;
  element.style.filter = `hue-rotate(${hueValue}deg)`;
  requestAnimationFrame(updateFilter);
}

updateFilter();

Accessibility Considerations

Ensure content remains readable when using filters:

.filtered-text {
  color: black;
  filter: contrast(200%);
  
  @media (prefers-contrast: high) {
    filter: none;
  }
}