Генератор Glassmorphism
Генератор Glassmorphism створює ефект матового скла за допомогою CSS backdrop-filter: ви налаштовуєте розмиття, прозорість фону, насиченість, прозорість рамки, радіус і колір відтінку з живим переглядом.
Про цей інструмент
Генератор Glassmorphism створює ефект матового скла за допомогою CSS backdrop-filter: ви налаштовуєте розмиття, прозорість фону, насиченість, прозорість рамки, радіус і колір відтінку з живим переглядом.
Як користуватися
- Виберіть колір відтінку скла.
- Налаштуйте розмиття, прозорість і насиченість.
- Задайте прозорість рамки та радіус заокруглення.
- Натисніть «Копіювати CSS».
Корисно знати
- Ефект використовує backdrop-filter: blur() saturate(), що розмиває все позаду елемента.
- Потрібен напівпрозорий фон (rgba), інакше розмиття не буде видно.
- Згенерований CSS містить префікс -webkit-backdrop-filter для Safari.
- Скло найкраще виглядає на яскравому фоні чи зображенні; на однотонному кольорі розмиття непомітне.
- Стежте за контрастом тексту — на строкатому фоні напівпрозорі панелі можуть не відповідати вимогам контрасту WCAG.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як зробити ефект скла в CSS?
Задайте елементу напівпрозорий фон, наприклад rgba(255,255,255,0.15), і backdrop-filter: blur(12px); цей інструмент напише повне правило.
Чому не працює backdrop-filter?
Елементу потрібен прозорий або напівпрозорий фон, а позаду нього має бути щось, що можна розмити. Safari також потребує префікса -webkit-.
Чи доступний glassmorphism?
Може бути, якщо текст зберігає достатній контраст. Перевіряйте кольори тексту на найстрокатішій ділянці фону.
Чи впливає backdrop-filter на продуктивність?
Розмиття сильно навантажує GPU, тож не застосовуйте його до дуже великих ділянок чи багатьох елементів одночасно, особливо на слабких телефонах.