Filters and Effects

Blur, brightness, drop-shadow, backdrop-filter, and blend modes.

Overview

CSS filters create visual effects on elements.

Key Concepts

• filter — Apply visual effects
• backdrop-filter — Style behind element
• mix-blend-mode — Blend with background
• brightness/contrast — Adjust appearance
• grayscale/sepia — Color effects

Code Examples

/* Basic filters */
.blur { filter: blur(5px); }
.brightness { filter: brightness(1.2); }
.contrast { filter: contrast(1.5); }
.grayscale { filter: grayscale(100%); }
.sepia { filter: sepia(100%); }
.hue-rotate { filter: hue-rotate(90deg); }
.saturate { filter: saturate(1.5); }

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

/* Image effects */
.image-hover {
  transition: filter 0.3s ease;
}

.image-hover:hover {
  filter: brightness(1.1) saturate(1.2);
}

/* Grayscale to color on hover */
.image-gallery img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.image-gallery img:hover {
  filter: grayscale(0%);
}

/* Backdrop blur (glassmorphism) */
.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Blend modes */
.overlay {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  mix-blend-mode: multiply;
}

.screen {
  background: white;
  mix-blend-mode: screen;
}

/* Text over image with blend */
.hero-text {
  background: rgba(0, 0, 0, 0.7);
  mix-blend-mode: multiply;
}

/* Focus effects */
.input:focus {
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Multiple filters */
.complex-effect {
  filter: brightness(1.1) contrast(1.05) saturate(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

Practice

Create a glassmorphism UI with filter effects and blend modes.