CSS Filters, Blend Modes & Glassmorphism

Q: What is the difference between box-shadow and filter: drop-shadow?

box-shadow casts a shadow around the rectangular box model boundary. filter: drop-shadow() respects alpha transparency, casting a shadow perfectly around transparent PNG shapes, SVGs, and text.

Q: Can I combine multiple filters?

Yes! Separate them by spaces: 'filter: grayscale(50%) brightness(1.2) contrast(110%);'.

Q: What is mix-blend-mode used for?

mix-blend-mode dictates how an element's colors blend with the colors of elements behind it (e.g., multiply, screen, overlay, difference). It is popular for creative text over photo backgrounds.

Q: Does backdrop-filter work in all browsers?

Yes, backdrop-filter is universally supported in all modern browsers. Always include the -webkit- prefix for full iOS Safari compatibility.

CSS Filters and Blend Modes bring professional Photoshop-grade image processing and graphic blending directly to the browser DOM in real time without opening graphic editing software.

1. CSS Filter Functions

Filter Function	Standard Example	Visual Image Effect
`blur()`	`filter: blur(5px);`	Applies Gaussian blurring to the element.
`grayscale()`	`filter: grayscale(100%);`	Converts full-color photos to vintage black & white.
`brightness()`	`filter: brightness(1.2);`	Brightens (or darkens if < 1) the element.
`contrast()`	`filter: contrast(150%);`	Boosts separation between lights and darks.
`drop-shadow()`	`filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));`	Cuts a shadow matching transparent PNG silhouettes (unlike box-shadow which casts a rectangular box).

2. The Modern Frosted Glass Effect (backdrop-filter)

While filter applies to the element itself, backdrop-filter blurs everything behind the semi-transparent element, creating the famous Apple iOS / Windows Acrylic glassmorphism look:

.glass-card {
  background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
  backdrop-filter: blur(12px) saturate(180%);  /* Blurs background behind card */
  -webkit-backdrop-filter: blur(12px) saturate(180%); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

Explore Related CSS Tutorials & Next Steps

Boost your CSS and front-end development proficiency by exploring these closely connected topics:

CSS Box Model & border-box

Understand margins, borders, padding, content and the universal box-sizing fix.

CSS Flexbox Complete Guide

Master 1D alignment, justify-content, align-items, flex-wrap and responsive flow.

CSS Grid 2D Layout Matrix

Build powerful two-dimensional grid layouts with template areas and fr units.

CSS Specificity & Cascade

Eliminate styling conflicts and master selector weights from 0,0,0,1 to !important.

Frequently Asked Questions (FAQ) - Student & Interview Review

Q1. What is the difference between box-shadow and filter: drop-shadow?

box-shadow casts a shadow around the rectangular box model boundary. filter: drop-shadow() respects alpha transparency, casting a shadow perfectly around transparent PNG shapes, SVGs, and text.

Q2. Can I combine multiple filters?

Yes! Separate them by spaces: 'filter: grayscale(50%) brightness(1.2) contrast(110%);'.

Q3. What is mix-blend-mode used for?

mix-blend-mode dictates how an element's colors blend with the colors of elements behind it (e.g., multiply, screen, overlay, difference). It is popular for creative text over photo backgrounds.