Backdrop Filter & Glassmorphism: сучасні UI тренди

Glassmorphism створює глибину та елегантність через ефекти матового скла. Властивість backdrop-filter робить це легким для реалізації.

Що таке Backdrop Filter?

Застосовує ефекти як blur та saturation до області позаду елемента, створюючи реалістичні ефекти скла.

Базовий Glassmorphism

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Просунуті ефекти

Матова навігація

.navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) brightness(1.1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

Overlay модального вікна

.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

Поради щодо продуктивності

• Обмежте радіус blur
• Використовуйте на менших областях
• Уникайте анімації backdrop-filter
• Тестуйте на слабших пристроях

Підтримка браузерами

Підтримується у всіх сучасних браузерах. Fallback:

.glass {
  background: rgba(255, 255, 255, 0.9);
}
@supports (backdrop-filter: blur(10px)) {
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }
}

Поєднуйте з нашим Gradient Generator для приголомшливих glass ефектів!