Advanced Features

CSS Filters

Visual effects for images and elements: blur, brightness, contrast, drop-shadow, and more.

1Common Filters

Combine multiple filter functions in a single declaration.

Example Code

css

.thumb {
  filter: brightness(1.1) contrast(1.05) saturate(1.2);
}
.thumb:hover { filter: none; }

2Backdrop Filter

Apply a filter to the area behind an element — useful for glass effects.

Example Code

css

.glass {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

3drop-shadow vs box-shadow

drop-shadow follows transparent edges (PNGs, SVGs). box-shadow uses the bounding box.

Example Code

css

.icon {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

4Understand it in a real interface

A filter changes rendered appearance rather than the original file. Applying it to a whole container also affects its text and descendants. Filter order can matter, and large blur effects can be expensive or make details difficult to recognize.

5Try it yourself

Apply modest brightness and saturation changes to an image, keeping its caption outside the filtered element. Compare the function order and inspect the result at a phone-sized width. Do not use a blur as a secure way to conceal private information in the source asset.

Finished reading?

Mark this topic as complete to track progress.

CSS Variables (Custom Properties)