Генератор CSS ефекту glassmorphism

Що таке glassmorphism?

Glassmorphism — дизайн-тренд, що імітує ефект матового скла: напівпрозорий елемент із розмитим фоном і тонкою світловою рамкою. Popularized by iOS 13 та Windows 11, він надає UI легкий, сучасний вигляд. CSS властивість backdrop-filter: blur() є ключовою для цього ефекту.

CSS-реалізація

Базовий glassmorphism: background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px. backdrop-filter застосовує фільтр до всього, що знаходиться за елементом. Для темних тем використовуйте rgba(0, 0, 0, 0.2). Ефект найкраще виглядає на яскравому градієнтному фоні.

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

backdrop-filter підтримується у Chrome, Safari та Edge. Firefox потребує окремого синтаксису та перемикача layout.css.backdrop-filter.enabled в older versions. Для Firefox-fallback використовуйте background: rgba(255, 255, 255, 0.7) без blur-ефекту.

Доступність glassmorphism

Напівпрозорий фон може знизити контрастність тексту нижче рівня WCAG. Завжди перевіряйте контраст із різними фоновими зображеннями. Анімовані або відеофони під glassmorphism-елементами можуть відволікати і викликати проблеми для людей з вестибулярними розладами. Додавайте @media (prefers-reduced-motion) для вимкнення анімацій фону.