Реклама мешает? Идти Без рекламы Сегодня 

Генератор CSS Glassmorphism

РазработчикМатематика

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Предустановленные стили

Предустановленный

Фильтр фона

Размытие (px): 10

Цвет фона

Цвет

Непрозрачность (%): 20

Граница

Радиус скругления (px): 16

Ширина границы (px): 1

Цвет границы

Непрозрачность границы (%): 30

Тень блока

Включить тень блока

Смещение X (px): 0

Смещение Y (px): 4

Размытие тени (px): 30

Распространение тени (px): 0

Цвет тени

Непрозрачность тени (%): 10

Фон предпросмотра

Фон

Сплошной цвет

Показать плавающие фигуры

ВЫХОД

Клиентская сторона

Живой просмотр

Стеклянная карточка

Это предпросмотр эффекта glassmorphism

Сгенерированный CSS

Реклама · УДАЛИТЬ?

Гид

Генератор CSS Glassmorphism

Создавайте потрясающие эффекты матового стекла с помощью интерактивного визуального редактора. Настраивайте размытие фона, прозрачность фона, непрозрачность рамки, радиус рамки и тень блока в режиме реального времени и мгновенно увидите результат на красочном предпросмотре. Скопируйте сгенерированный CSS или полный фрагмент HTML+CSS, готовый для вашего проекта, с вендорными префиксами для кроссбраузерной совместимости.

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

Используйте ползунки для настройки свойств глaссморфизма: размытие фона контролирует интенсивность матового стекла, цвет и альфа-канал фона задают оттенок, а элементы управления рамкой добавляют тонкую стеклянную кромку. Выбирайте из 6 градиентных фонов и переключайте плавающие фигуры, чтобы увидеть, как размытие взаимодействует с содержимым за стеклянной карточкой. Выберите пресет, такой как «Нежное стекло» или «Темное стекло», для быстрой отправной точки, а затем выполните точную настройку. Скопируйте CSS или полный фрагмент HTML+CSS, когда будете довольны результатом.

Возможности

Живой просмотр – Наблюдайте, как эффект глaссморфизма обновляется в реальном времени при изменении любого элемента управления
Управление размытием фона – Ползунок от 0 до 40px для установки интенсивности матового стекла
Фон RGBA – Выбор цвета с отдельным ползунком непрозрачности для точного контроля прозрачности
Управление рамкой и тенью – Настройка ширины рамки, цвета, непрозрачности, радиуса и опциональной тени блока
Градиентные фоны – 6 красочных градиентных пресетов с опциональными плавающими фигурами для демонстрации эффекта размытия
Пресеты стилей – Пресеты в одно нажатие: Нежное стекло, Матовое, Темное стекло и Цветное стекло
Вендорные префиксы – Сгенерированный CSS включает -webkit-backdrop-filter для совместимости с Safari
Копировать CSS или HTML+CSS – Получите только CSS-свойства или полный фрагмент карточки, готовый к вставке

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Что такое glassmorphism в CSS?

Glassmorphism - это тренд дизайна пользовательского интерфейса, который создает эффект матового стекла, используя CSS backdrop-filter с размытием в сочетании с полупрозрачным цветом фона. Размытие делает содержимое позади элемента мягким и рассеянным, а прозрачный фон добавляет цветной оттенок. Популяризированный macOS Big Sur от Apple и Windows 11 Fluent Design, glassmorphism создает глубину и визуальную иерархию, позволяя фоновым элементам проглядываться частично. Ключевые CSS-свойства - backdrop-filter: blur(), background: rgba() и обычно тонкая граница для усиления края стекла.
Какие браузеры поддерживают backdrop-filter?

Backdrop-filter поддерживается в Chrome 76 и выше, Safari 9 и выше (с префиксом -webkit), Edge 79 и выше, Firefox 103 и выше, а также во всех современных мобильных браузерах. Safari требует префикс -webkit-backdrop-filter, который этот генератор включает автоматически. Единственный заметный пробел - это старые версии Firefox до 103 и Internet Explorer, которые не поддерживаются. Для неподдерживаемых браузеров полупрозрачный цвет фона все еще обеспечивает эффект тонированного наложения, только без размытия. В целом поддержка браузера превышает 95 процентов глобальных пользователей по состоянию на 2026 год.
Чем backdrop-filter отличается от обычного filter в CSS?

Свойство CSS filter применяет визуальные эффекты, такие как размытие, к самому элементу и его дочерним элементам. Backdrop-filter применяет те же эффекты только к области позади элемента, оставляя содержимое элемента четким и читаемым. Это то, что создает эффект glassmorphism: текст на стеклянной карточке остается четким, а фон позади него выглядит размытым. Если бы вы использовали filter: blur(), текст внутри карточки также был бы размыт и нечитаем. Backdrop-filter по сути создает эффект окна, где вы смотрите сквозь матовое стекло.
Что делает хороший дизайн glassmorphism?

Эффективный glassmorphism требует красочного или детализированного фона, чтобы размытие было видимым. Однотонный белый фон позади стекла выглядит идентично обычной карточке. Используйте значения размытия от 8 до 20 пикселей в большинстве случаев. Держите непрозрачность фона между 10 и 30 процентами, чтобы содержимое позади оставалось частично видимым. Добавьте тонкую светлую границу с непрозрачностью белого от 10 до 30 процентов, чтобы усилить край стекла. Избегайте многоуровневого расположения стеклянных слоев, так как каждый backdrop-filter увеличивает затраты производительности. Убедитесь, что контраст текста соответствует стандартам доступности, так как полупрозрачные фоны могут снизить читаемость.