Эффект жидкого стекла создаётся комбинацией размытого фона (backdrop-filter: blur), полупрозрачной карточки и мягкой подсветки. В нашем CSS-генераторе достаточно загрузить фон, настроить ползунки и скопировать готовый код — никаких ручных стилей.
Такой стеклянный эффект подходит для карточек товаров, премиальных блоков, форм входа и музыкальных виджетов. Glassmorphism CSS выглядит современно и визуально разделяет слои без тяжёлых рамок. Результат поддерживается в Chrome, Safari и Edge.
Генератор позволяет настроить размытие, прозрачность, скругление, шум и подсветку. Пресеты помогут быстро подобрать сочетание: от матового Frost до насыщенного тёмного стекла. Готовый CSS-код можно сразу вставить в проект.
Пресеты эффекта жидкого стекла
| Пресет | Размытие | Прозрачность | Подсветка | Для чего |
|---|---|---|---|---|
| Тёмное стекло | 20px | 30% | Белая | Тёмные темы, соцсети |
| Светлое стекло | 15px | 50% | Синяя | Карточки товаров |
| Матовое (Frost) | 30px | 25% | Нет | Минимализм, UX |
| Премиум | 18px | 35% | Золотая | Главные экраны |