В чем разница между использованием filter и backdrop-filter?

filter vs backdrop-filter в CSS: различия и применение

Отличный вопрос о CSS фильтрах. Оба используются для визуальных эффектов, но работают по-разному.

filter - эффект на самом элементе

filter применяет эффект к содержимому элемента и его потомкам:

.image-blur {
  filter: blur(5px);  /* Размывает сам элемент */
}

.image-brightness {
  filter: brightness(1.5);  /* Делает ярче */
}

.image-grayscale {
  filter: grayscale(100%);  /* Черно-белый */
}

.image-multiple {
  filter: brightness(1.2) contrast(1.3) saturate(1.1);
}

backdrop-filter - эффект на фоне (за элементом)

backdrop-filter применяет эффект к всему ЧТО НАХОДИТСЯ за элементом:

.glass-effect {
  backdrop-filter: blur(10px);  /* Размывает всё за элементом */
  background-color: rgba(255, 255, 255, 0.1);  /* Полупрозрачный фон */
}

.glass-dark {
  backdrop-filter: brightness(0.8);  /* Затемняет фон */
  background-color: rgba(0, 0, 0, 0.2);
}

Наглядное сравнение

<!-- filter: размывает сам элемент -->
<img src="photo.jpg" style="filter: blur(10px)" />
<!-- Результат: само изображение размыто -->

<!-- backdrop-filter: размывает фон ПОД элементом -->
<div style="backdrop-filter: blur(10px); background: rgba(255,255,255,0.1);">
  <p>Текст остается четким, но фон размыт</p>
</div>

Практические примеры

1. Размытое изображение (filter)

.photo-preview {
  filter: blur(3px);
  transition: filter 0.3s ease;
}

.photo-preview:hover {
  filter: blur(0);  /* Четкое при наведении */
}

// Реакт пример
<img 
  src="image.jpg" 
  style={{
    filter: isHovering ? 'blur(0)' : 'blur(5px)',
    transition: 'filter 0.3s ease'
  }} 
/>

2. Стеклянный эффект (backdrop-filter)

.glass-navbar {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.glass-card {
  backdrop-filter: blur(8px) brightness(0.9);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
}

Это популярно в современном дизайне (neumorphism, glassmorphism).

3. Модальное окно с размытым фоном (backdrop-filter)

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px) brightness(0.7);
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.modal {
  position: relative;
  z-index: 1000;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Сейчас blur фона популярнее чем просто черный оверлей.

4. Черно-белая фотография (filter)

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

.bw-image:hover {
  filter: grayscale(0);
}

5. Светофильтр на видео (filter)

.video-yellow {
  filter: sepia(0.5) saturate(1.5) hue-rotate(-30deg);
}

.video-cool {
  filter: saturate(1.3) hue-rotate(10deg);
}

Доступные фильтры

/* filter */
filter: blur(5px);
filter: brightness(150%);
filter: contrast(120%);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));

/* backdrop-filter (тот же набор) */
backdrop-filter: blur(10px);
backdrop-filter: brightness(80%);
backdrop-filter: contrast(110%);

Производительность

          | filter    | backdrop-filter
----------|-----------|----------------
Производ  | Хорошая   | Хуже
Сложность | Меньше    | Больше
Особое    | Элемент   | Весь слой
Совместим | 99%       | 90% (сафари хуже)

Совет: backdrop-filter дороже, используй осторожно.

Performance оптимизация

/* Плохо: backdrop-filter на большой области */
.full-screen-blur {
  backdrop-filter: blur(20px);
  width: 100vw;
  height: 100vh;  /* Размывает весь экран! */
}

/* Хорошо: ограничиваем область */
.header-blur {
  backdrop-filter: blur(10px);
  width: 100%;
  height: 80px;  /* Только хедер */
}

/* Хорошо: используем will-change */
.glass-navbar {
  backdrop-filter: blur(8px);
  will-change: backdrop-filter;  /* Гарантирует GPU */
}

Реальный пример: навигация + модал

import { useState } from 'react';

export function App() {
  const [showModal, setShowModal] = useState(false);
  
  return (
    <div>
      {/* Стеклянная навигация */}
      <nav 
        className="fixed top-0 w-full backdrop-blur-lg bg-white/10 border-b border-white/20"
        style={{
          backdropFilter: 'blur(10px)',
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
        }}
      >
        <button onClick={() => setShowModal(true)}>Открыть</button>
      </nav>
      
      {/* Размытый оверлей модали */}
      {showModal && (
        <>
          <div
            className="fixed inset-0 z-40"
            style={{
              backdropFilter: 'blur(5px) brightness(0.7)',
              backgroundColor: 'rgba(0, 0, 0, 0.3)',
            }}
            onClick={() => setShowModal(false)}
          />
          <dialog className="fixed z-50 bg-white rounded-lg p-8">
            <h2>Модальное окно</h2>
            <button onClick={() => setShowModal(false)}>Закрыть</button>
          </dialog>
        </>
      )}
    </div>
  );
}

Tailwind CSS

<!-- filter -->
<img class="blur-md" />
<img class="grayscale" />
<img class="sepia" />

<!-- backdrop-filter (v3+) -->
<div class="backdrop-blur-lg">Content</div>
<div class="backdrop-blur-sm">Content</div>
<div class="backdrop-brightness-90">Content</div>

Вывод

Используй filter когда:

• Нужно изменить сам элемент
• Размытие изображения
• Черно-белый фильтр
• Изменить яркость/контраст элемента

Используй backdrop-filter когда:

• Стеклянный эффект (glassmorphism)
• Размытие фона ПОД элементом
• Модальные окна с размытым фоном
• Прозрачные панели поверх контента

В 10+ лет разработки: backdrop-filter стал стандартом в современном UI дизайне. Используй его аккуратно (не размывай весь экран сразу), но результат впечатляет.