Генератор Glassmorphism CSS

Что такое Генератор glassmorphism?

Создаёт эффект матового стекла (glassmorphism): полупрозрачную тонированную панель, которая размывает и насыщает всё, что находится за ней, с необязательной светлой рамкой и мягкой тенью. В предпросмотре карточка лежит на цветных фонах, чтобы можно было оценить эффект.

Как пользоваться Генератор glassmorphism

1. Выберите пресет: Frosted, Dark glass, Tinted или Subtle.
2. Настройте размытие и насыщенность фона.
3. Выберите цвет и прозрачность оттенка, прозрачность рамки и радиус.
4. Включите тень и попробуйте разные фоны в настройках предпросмотра.
5. Скопируйте CSS-код.

Пример

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

Префиксная строка идёт первой, чтобы её подхватил Safari.

Когда использовать Генератор glassmorphism

Подходит для карточек, панелей навигации и модальных окон поверх изображений или цветных градиентов. Эффект виден только тогда, когда за элементом есть что-то заметное; на однотонном фоне это просто полупрозрачный блок. Проверяйте контраст текста: фон за стеклом меняется.

Как работает Генератор glassmorphism

Фон панели это цвет оттенка с выбранной прозрачностью (rgba()), а рамка использует тот же цвет с прозрачностью рамки. Размытие и насыщенность попадают в backdrop-filter: blur(px) saturate(%); saturate(100%) опускается, так как ничего не меняет. Объявление записывается дважды: сначала с префиксом -webkit-, который до сих пор нужен Safari, затем без него. Если размытие равно 0, а насыщенность 100%, backdrop-filter не выводится вовсе.

Распространенные Случаи Использования

• ✓ Матовые панели навигации поверх изображений первого экрана
• ✓ Стеклянные карточки на фоне mesh-градиентов
• ✓ Модальные окна, сохраняющие видимость контекста
• ✓ Виджеты музыки или погоды
• ✓ Тёмные стеклянные оверлеи для элементов управления видео

Часто Задаваемые Вопросы

Другие категории