CSS Бесплатно, без регистрации

Генератор CSS Glassmorphism

Настройте размытие фона (blur), сочность цветов (saturate), полупрозрачность и блик на грани карточки — получите готовый современный CSS-код за секунды.

Результат

Готовый CSS-код

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

Как пользоваться

Выберите готовый пресет (матовый белый, тёмный обсидиан, неон, кибер или жемчужный) или настройте параметры вручную.
Регулируйте ползунок blur для степени размытия фона и saturate для сочности просвечивающих сквозь стекло цветов.
Задайте цвет стекла и уровень прозрачности фона (background: rgba(...)) — обычно 10%–25% дают лучший эффект.
Настройте тонкую полупрозрачную грань (border) и мягкую тень (box-shadow) для объема, затем нажмите «Копировать».

Как это работает

Что такое Glassmorphism и из чего он состоит?

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

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Разница между filter и backdrop-filter

Главная ошибка новичков — написать filter: blur(). Свойство filter: blur() размывает сам элемент целиком: его текст, иконки и кнопки становятся нечитаемыми! Свойство backdrop-filter: blur() оставляет контент внутри блока идеально чётким, а размывает исключительно то, что расположено ПОЗАДИ карточки.

/* Верно: контент резкий, фон сзади размыт */
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);

Световая грань и объём (Edge Highlight)

Настоящее стекло преломляет свет по контуру среза. Чтобы повторить это в CSS, блоку задают border: 1px solid rgba(255, 255, 255, 0.3). Без этой грани карточка выглядит как просто блёклое пятно, а с ней — как отполированная стеклянная панель.

Поддержка браузерами и префикс Safari

backdrop-filter поддерживается всеми актуальными браузерами. Однако движок WebKit (браузеры Safari на macOS и iOS) всё ещё требует префикс -webkit-backdrop-filter. Рекомендуется всегда указывать оба свойства вместе.

Частые вопросы

Почему текст внутри карточки стал размытым?

Вы использовали filter: blur() вместо backdrop-filter: blur(). Первое размывает сам блок с текстом, второе — только подложку под ним.

Почему на белом фоне эффекта стекла не видно?

Стекло заметно только тогда, когда позади него есть детали: яркие цвета, фотографии или движущиеся объекты. На однотонном белом фоне стекло сливается.

Обязателен ли префикс -webkit-backdrop-filter?

Да, для полной поддержки на iPhone, iPad и Safari на Mac префикс обязателен. Без него в Safari фон останется обычной полупрозрачной заливкой без размытия.

Влияет ли backdrop-filter на производительность?

Умеренное размытие (10–20px) на нескольких карточках работает плавно. Но если покрыть матовым стеклом весь экран со сложной анимацией, на слабых мобильных устройствах может вырасти нагрузка на GPU.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты