Генератор glassmorphism

Glassmorphism — это стиль интерфейса, при котором элемент выглядит как матовое стекло: полупрозрачная панель, размывающая всё, что находится за ней, с тонкой светлой рамкой и мягкой тенью для глубины. Этот стиль применяется в macOS Big Sur, акриловых поверхностях Windows 11 и современных карточках форм входа. Три ключевых компонента: полупрозрачная заливка, backdrop-blur и тонкая рамка, например: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).

Задайте элементу полупрозрачный фон и backdrop blur, затем добавьте тонкую рамку. Хорошая отправная точка: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). Главное — заливка фона должна быть частично прозрачной, чтобы размытие за ней просвечивало. Перетаскивайте слайдеры выше для точной настройки и скопируйте готовый CSS.

backdrop-filter применяет графический эффект — чаще всего blur() — к области позади элемента, а не к его собственному содержимому. То есть backdrop-filter: blur(10px) размывает всё, что отрисовывается за блоком, создавая эффект матового стекла. Можно комбинировать фильтры: например, backdrop-filter: blur(10px) saturate(150%) одновременно размывает и усиливает цвет за стеклом. Эффект виден только если собственный фон элемента хотя бы частично прозрачен.

Матовое стекло — это glassmorphism с более сильным размытием и чуть более непрозрачным оттенком. Попробуйте: background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. Увеличьте размытие до 14–20px, а непрозрачность оттенка — примерно до 20–30%, чтобы поверхность читалась как «матовая», а не прозрачная. Пресет Frosted card в UtiloKit мгновенно задаёт эти значения, так что можно начать с него и дорабатывать.

Да — backdrop-filter поддерживается всеми актуальными основными браузерами (Chrome, Edge, Firefox и Safari). Safari поддерживает его уже несколько лет с префиксом -webkit-backdrop-filter, поэтому всегда включайте обе строки: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). Генератор glassmorphism UtiloKit автоматически выводит версию с префиксом. Очень старые браузеры без поддержки просто показывают обычный полупрозрачный фон — корректная деградация.

Три типичные причины: (1) за элементом нет ничего для размытия — backdrop-filter влияет только на контент, отрисованный позади, поэтому размещайте его поверх изображения или градиента; (2) собственный фон элемента полностью непрозрачен — используйте rgba()-заливку вроде rgba(255,255,255,0.18), чтобы размытие просвечивало; (3) вы забыли префикс -webkit-backdrop-filter для Safari. Также учтите, что предок с filter, transform или will-change может создать содержащий блок, который полностью ломает эффект.

Комбинируйте утилиты backdrop-blur с полупрозрачным фоном и тонкой рамкой. Например: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". Используйте backdrop-saturate-150 для усиления цвета за стеклом. Для точных значений переключите вывод выше на вкладку Tailwind — она генерирует классы с произвольными значениями, такие как backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px], точно соответствующие вашим слайдерам.

Glassmorphism использует прозрачность и размытие фона, чтобы элемент выглядел как матовое стекло, парящее над контентом. Neumorphism (мягкий UI) — противоположность: непрозрачные элементы того же цвета, что и страница, которым придаётся объёмный, выдавленный вид с помощью парных светлых и тёмных теней — например, box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. Glassmorphism требует цветного фона для эффектного вида; neumorphism требует плоского однотонного фона.

Для большинства карточек хорошо смотрится backdrop blur от 8 до 16px. Используйте около 5–8px для лёгкого, едва матового стекла, 10–16px для типичной карточки или модального окна, и 16–25px для тяжёлого матового стекла навбара или оверлея. Чем больше размытие, тем немного выше должна быть непрозрачность оттенка, чтобы текст оставался читаемым. Слайдер Blur выше позволяет задать значение от 0 до 40px — ищите оптимальную точку для вашего конкретного фонового изображения.

Читаемость определяется контрастом между текстом и размытым фоном. Увеличьте непрозрачность оттенка примерно до 25–40%, чтобы поверхность была менее прозрачной, добавьте backdrop-saturate для приглушения ярких цветов за стеклом, и выберите цвет текста с сильным контрастом — белый текст на тёмном оттенке стекла или тёмный текст на светлом. Стремитесь к соотношению контрастности WCAG 4.5:1 для основного текста и избегайте размещения мелкого текста над самой яркой частью фонового изображения.

Это возможно, но требует внимания. Прозрачность делает контраст непредсказуемым, поскольку цвет за стеклом постоянно меняется, что может снизить читаемость текста ниже минимума WCAG 4.5:1. Используйте достаточно высокую непрозрачность оттенка (30%+), проверяйте текст в самой насыщенной части фона и не полагайтесь только на размытие для разделения контента. Также соблюдайте настройку prefers-reduced-transparency, предоставляя более непрозрачный запасной вариант в вашем CSS.

Glassmorphism.com (от Michal Malewicz) даёт быструю отправную точку для одного стиля, но не позволяет загружать собственное фоновое изображение, управлять насыщенностью или экспортировать классы Tailwind. Glass UI (glass-ui.com) столь же ограничен — единственный фон в предпросмотре, нет вывода Tailwind, нет ссылки для совместного использования. UtiloKit позволяет добавить собственное изображение, настроить каждый параметр включая насыщенность и интенсивность тени, получить вывод в CSS и Tailwind, а также поделиться точной конфигурацией через URL. Всё работает в браузере без отправки чего-либо на сервер.

Разместите контейнер поверх фонового изображения или градиента, затем примените сгенерированный CSS к карточке. Минимальный пример: задайте родительскому элементу фон, затем стилизуйте дочерний с помощью background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px. Скопируйте готовый HTML-сниппет из вывода выше — он включает разметку и блок стилей, который можно вставить прямо на страницу без дополнительной настройки.

Да. Генератор glassmorphism UtiloKit полностью адаптирован для мобильных устройств и работает в Safari на iPhone, Chrome на Android и любом современном мобильном браузере. Слайдеры удобны для сенсорного управления, живой предпросмотр обновляется в реальном времени, а копирование CSS или вывода Tailwind работает через буфер обмена телефона так же, как и на компьютере. Поскольку всё работает в браузере без сервера, ничего не нужно устанавливать — просто откройте страницу и начинайте создавать.

Да — нажмите кнопку «Скопировать ссылку», и все значения слайдеров будут закодированы прямо в URL. Отправьте эту ссылку дизайнеру или разработчику, и они откроют вашу точную конфигурацию: то же размытие, тот же цвет и непрозрачность оттенка, та же насыщенность, те же настройки рамки и тени. Аккаунт не нужен, файл экспортировать не нужно. Это одна из областей, где glassmorphism.com и Glass UI проигрывают — ни один из них не поддерживает ссылки с сохранёнными конфигурациями.