mix-blend-mode

Определяет, как цвета элемента смешиваются с цветами фона (аналог режимов наложения в Photoshop).

Зачем нужно

Создаёт визуальные эффекты наложения цветов без графического редактора. Используется для тонирования изображений, текстовых эффектов и декоративных слоёв.

Где используется

  • Тонирование фото цветным оверлеем
  • Текст поверх изображений с наложением
  • Декоративные градиентные слои

Code example

/* Тонирование изображения */
.tinted-image {
  position: relative;
}
.tinted-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #3b82f6;
  mix-blend-mode: multiply;
}

/* Текст с наложением */
.blend-text {
  font-size: 4rem;
  font-weight: 900;
  color: white;
  mix-blend-mode: difference;
}

/* Основные режимы */
.multiply   { mix-blend-mode: multiply; }   /* затемнение */
.screen     { mix-blend-mode: screen; }     /* осветление */
.overlay    { mix-blend-mode: overlay; }    /* контраст */
.difference { mix-blend-mode: difference; } /* инверсия */
.luminosity { mix-blend-mode: luminosity; } /* яркость */

/* background-blend-mode для фонов */
.hero {
  background: url(photo.jpg), linear-gradient(#3b82f6, #8b5cf6);
  background-blend-mode: overlay;
}

Связанные темы

Ресурсы