Атлас
Приём оформления

Глассморфизм

Glassmorphism

Приём «матового стекла»: полупрозрачные размытые панели со светлой обводкой парят над яркими цветными пятнами и градиентами.

Способ отрисовки поверхностей и элементов. Обычно накладывается на основное направление, а не заменяет его. Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация
Демонстрация, а не реальный проект: сайт в стиле «Глассморфизм». Тексты и данные вымышлены и показывают структуру, типографику и характер элементов.

О стиле

Глассморфизм — приём оформления поверхностей, а не самостоятельное направление. Панели, карточки и меню выглядят как матовое стекло: они полупрозрачны, размывают то, что лежит под ними (backdrop-filter: blur), имеют тонкую светлую обводку по краю и мягкую тень. Эффект работает только тогда, когда под стеклом есть что размывать — яркие цветные пятна, градиенты, фотография или иллюстрация.

Приём накладывается на основное направление и меняет только материал поверхностей. С технологичным оформлением он даёт футуристичные тёмные виджеты, с премиальным — дорогие спокойные панели поверх фотографии, с игривым — сочные градиенты и пухлые карточки, с минимализмом — одну-две стеклянные плашки на чистом фоне. Типографику, сетку и тон текста по-прежнему задаёт основное направление.

Главная сложность — читаемость. Контраст текста зависит от того, что просвечивает сквозь стекло, и может меняться от точки к точке. Поэтому хороший глассморфизм всегда страхуется: достаточная непрозрачность панели, затемняющая или осветляющая подложка под текстом, проверка контраста на самом ярком и самом тёмном участке фона и запасной вариант без размытия для систем, где оно отключено или не поддерживается.

Основные признаки

  • Полупрозрачные панели (белые 15–70% или тёмные 40–70% непрозрачности) с размытием фона 16–40 px.
  • Тонкая светлая обводка 1 px (белый 30–60%) и блик по верхнему краю — так читается кромка стекла.
  • Яркий фон под стеклом: крупные размытые цветные пятна, сочные градиенты, фотография.
  • Многослойность: панели перекрывают друг друга и парят на разной высоте, глубину подчёркивают мягкие тени.
  • Крупные скругления 16–32 px и плавные формы.
  • Немного элементов на каждой панели: стекло подчёркивает группировку, а не заменяет её.
  • Светлая и тёмная версии: молочное стекло на пастели или дымчатое стекло на ночном фоне.

Композиция и визуальная иерархия

Композиция

  • Фон — сцена из 2–4 крупных цветных пятен или градиента; стеклянные панели размещаются над самыми яркими участками, чтобы размытие было заметно.
  • Стеклом оформляют 2–5 ключевых поверхностей экрана: навигацию, главные карточки, всплывающие окна; остальное — обычный фон.
  • Панели можно частично накладывать друг на друга — перекрытие показывает материал и создаёт глубину.
  • Плавающие элементы: навигация-«пилюля» с отступом от краёв, нижняя панель, оторванная от края экрана.
  • Основной текст размещается на более плотном стекле или над спокойной частью фона, а не над самым контрастным пятном.

Визуальная иерархия

  • Важность выражается плотностью стекла: главная панель более светлая и непрозрачная, второстепенные — прозрачнее.
  • Ближние слои — с более сильной тенью и обводкой; дальние — тоньше и прозрачнее.
  • Главное действие — непрозрачная сплошная кнопка, которая выделяется среди полупрозрачных поверхностей.
  • Заголовки и ключевые цифры — крупные и плотные, чтобы оставаться читаемыми на неоднородном фоне.
  • Активный пункт навигации — более плотная стеклянная подложка или сплошная заливка.

Цвета и примеры палитр

  • Палитра состоит из двух слоёв: яркие цвета фона (пятна, градиент) и нейтральные цвета стекла и текста.
  • Цвета фона подбирайте близкими по тону (аналоговые) или с одним контрастным пятном — иначе размытая смесь даёт грязные оттенки.
  • Светлое стекло: белый 45–75% непрозрачности и тёмный текст; тёмное стекло: тёмно-синий или графитовый 45–70% и светлый текст.
  • Контраст текста проверяйте на результирующем цвете стекла над самым ярким и самым тёмным участком фона.
  • Акцент для главного действия — сплошной насыщенный цвет из палитры фона, но темнее, чтобы белый текст на нём читался.

Палитры — примеры, а не обязательный набор. Нажмите на цвет, чтобы скопировать HEX-код.

Рассвет

Светлое молочное стекло над розовыми, персиковыми и фиолетовыми пятнами.

Ночной океан

Дымчатое тёмное стекло над глубоким синим фоном с неоновыми пятнами.

Мятный лёд

Свежая прохладная гамма для сервисов о здоровье, энергии и климате.

Типографика

  • Шрифт задаёт основное направление; глассморфизму подходят чистые гротески с открытыми формами и хорошей читаемостью.
  • На стекле используйте вес на ступень плотнее обычного: основной текст 400–500, заголовки 500–700 — тонкие штрихи теряются на пёстром фоне.
  • Основной текст 15–18 px; мелкий текст меньше 13 px на стекле не используйте.
  • Длинные тексты размещайте на самой плотной панели (непрозрачность от 70%) или на сплошной подложке.

Все шрифты в примерах поддерживают кириллицу.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Geologica
    Текст
    Geologica

    Мягкий современный гротеск с вариативным весом — хорошо держится на неоднородном фоне.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Unbounded
    Текст
    Golos Text

    Широкий выразительный Unbounded для заголовков и спокойный Golos Text для интерфейса.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Manrope
    Текст
    Manrope

    Нейтральный геометричный гротеск для сдержанного, почти минималистичного стекла.

Кнопки, поля, карточки и навигация

Кнопки

Главная кнопка — сплошная непрозрачная заливка насыщенным цветом; вторичные — стеклянные: полупрозрачный фон, размытие, светлая обводка 1 px.

Поля ввода

Поля — более плотное стекло (белый 60–75% или тёмный 55–70%) с обводкой 1 px; в фокусе обводка становится акцентной и непрозрачной.

Карточки

Стеклянная карточка: полупрозрачная заливка, размытие 16–32 px, обводка 1 px белым 30–50%, мягкая тень и скругление 16–28 px.

Навигация

Плавающая стеклянная шапка или «пилюля» с отступом от краёв; на телефоне — стеклянная нижняя панель, оторванная от края экрана.

Рекомендации по применению

Где подходит

  • Умный дом, погода, музыка, медиаплееры, виджеты и дашборды с небольшим числом показателей.
  • Промостраницы технологичных и креативных продуктов, приложения для финансов и путешествий.
  • Всплывающие окна, меню, панели поверх фото или видео в любых стилях.
  • Операционные системы и интерфейсы с многослойными окнами.

Как применять

  • Сначала соберите яркий фон, потом кладите на него стекло: без цветных пятен эффект не виден и панели выглядят просто серыми.
  • Ограничьте стекло 2–5 поверхностями на экране — остальные элементы делайте обычными.
  • Проверьте контраст текста на самом светлом и самом тёмном участке под панелью; при сомнениях увеличьте непрозрачность стекла.
  • Предусмотрите запасной вариант без backdrop-filter: панель с почти непрозрачной заливкой того же оттенка.
  • Размытие ресурсоёмкое: не анимируйте его и избегайте десятков размытых слоёв в длинных списках.

Ограничения и типичные ошибки

Ограничения

  • Контраст текста непредсказуем: зависит от фона под стеклом, особенно поверх фото и видео.
  • Размытие нагружает графику: длинные прокручиваемые списки со стеклом тормозят на слабых устройствах.
  • Плохо подходит для плотных таблиц и длинных текстов — пёстрый фон мешает чтению.
  • При настройке «уменьшить прозрачность» или без поддержки backdrop-filter эффект пропадает — нужен запасной вариант.

Типичные ошибки

  • Стекло на однотонном или белом фоне — эффект не виден, панели выглядят грязно-серыми.
  • Слишком прозрачная панель (10–20%) с мелким текстом над ярким пятном.
  • Стеклом оформлено всё подряд: каждая кнопка, бейдж и поле — экран превращается в мутную кашу.
  • Нет обводки и тени — края панелей растворяются в фоне.
  • Слишком много разных цветов в фоне: размытая смесь даёт грязные коричневые и серые переходы.
  • Главная кнопка тоже полупрозрачная — действие теряется среди остальных поверхностей.

Сочетания с другими направлениями

Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

  • Технологичное оформление

    Тёмное дымчатое стекло поверх сетки и неоновых пятен свечения — футуристичные виджеты, панели показателей и всплывающие окна.

    Направление

  • Премиальное оформление

    Сдержанное стекло поверх крупной фотографии или глубокого градиента — спокойная роскошь для финансов и путешествий.

    Направление

  • Игривый дизайн

    Сочные пятна, крупные скругления и пухлые стеклянные карточки — живой характер для приложений и промостраниц.

    Направление

  • Bento-компоновка

    Bento-плитки из стекла над общим градиентом: каждая карточка просвечивает свой участок фона и сетка выглядит цельной.

    Компоновка

Применить стиль «Глассморфизм»

Получите промпт для ИИ-разработчика: выберите тип продукта — и инструкция будет собрана с учётом стиля и особенностей сайта, приложения или веб-платформы.

Использовать