Генератор стеклянного эффекта

Создайте полупрозрачную карточку с размытым фоном — glassmorphism. Выберите пресет, настройте оформление и скопируйте CSS.

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

Выберите основу в галерее и проверьте её на градиенте, пейзаже, светлом или тёмном фоне. Настройте размытие и насыщенность фона за карточкой, цвет и прозрачность заливки, текст, рамку и тень. Добавьте градиентную заливку из трёх цветов, направленный блик и внутренние светлую/тёмную грани. Каждый эффект отключается с сохранением параметров. Блик и градиент располагаются над основной заливкой; внутренние грани создаются через inset-тени. Для «Сатина» добавлена регулируемая зернистость: статическая SVG-текстура встроена в CSS, не требует отдельного файла и лежит поверх заливки. «Неон» сочетает тёмную заливку с цветной рамкой и свечением. «Линза» имитирует объём бликами, но не преломляет изображение.

Во вкладке «Анимация» выберите парение, блик, перелив, сияние, поворот, появление, бегущую рамку или световое пятно. Движение добавляется к текущему оформлению. Переключение вкладок меняет только галерею. Выбор пресета во вкладке «Статика» отключает движение; кнопка «Убрать анимацию» возвращает статичный эффект. Настройте длительность цикла, интенсивность и повтор. У бегущей рамки можно выбрать цвета следа, перехода и головной точки. Режим «Только при наведении или фокусе» запускает движение при наведении мыши или фокусе с клавиатуры и возвращает статичный вид при уходе. Для фокуса добавьте карточке tabindex="0" либо поместите внутрь ссылку или кнопку. Пауза и повторный запуск управляют только предпросмотром. CSS и ссылка сохраняют настройки анимации. Блик, перелив, бегущая рамка и световое пятно используют ::before — этот псевдоэлемент должен быть свободен. При системной настройке уменьшения движения анимация отключается и в предпросмотре, и в готовом CSS.

Добавьте класс glass нужному элементу. Код содержит только оформление карточки: размеры, отступы и фон родителя задаются в вашей вёрстке. Можно загрузить свой фон: PNG, JPEG, WebP, AVIF или GIF до 10 МБ и 24 млн пикселей. Файл остаётся в браузере и не отправляется на сервер. Заголовок, описание и подпись карточки можно изменить; пустые поля скрываются. Выбор пресета сохраняет ваш текст и фон. Ссылка сохраняет параметры эффекта и текст; фон предпросмотра в неё не входит. Сброс возвращает исходные параметры и текст карточки, сохраняя выбранный фон.

Почему размытие бывает незаметно

backdrop-filter меняет фон за элементом, а filter — сам элемент вместе с содержимым. Для стеклянного эффекта заливка должна быть полупрозрачной. При непрозрачности 100% она закрывает фон, а на однотонном фоне размывать почти нечего.

Проверяйте читаемость текста на том фоне, где будет стоять карточка: контраст меняется вместе с фоном. Генератор не гарантирует контраст для любой картинки. Если размытие не поддерживается, заливка, рамка и тень остаются; для таких браузеров можно задать более плотную заливку через @supports.

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

Предпросмотр

Фон под стеклом
Стеклянный эффект

Фон размывается, а текст остаётся чётким.

backdrop-filter
PNG, JPEG, WebP, AVIF или GIF до 10 МБ и 24 млн пикселей. Файл остаётся в браузере (не загружается на сервер) и не входит в ссылку.
Файл не выбран

Фон нужен для демонстрации и не входит в CSS. На однотонной подложке размытие почти незаметно.

Настройки стекла

Текст карточки

Готовый CSS

Включите JavaScript для настройки. Ниже — готовый пример стеклянной карточки.

backdrop-filter + оформление

.glass {
  background-color: rgb(255 255 255 / 0.2);
  background-image: none;
  background-size: auto;
  color: #182238;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgb(24 34 56 / 0.2);
}

Для фона используйте градиенты и паттерны, для обработки самого изображения — CSS-фильтры.