Какие значения размытия и насыщенности стоят по умолчанию?

Для стекла: blur 12px и saturate 160% — практичная композиция 2025 года. Классика css.glass — blur 5px.

Зачем в сниппете -webkit-backdrop-filter?

Safari до версии 17.x требует префикс; с Safari 18 и Firefox 103 он не нужен. Генератор всегда выводит оба объявления.

Как добавляется зернистая текстура?

Через SVG feTurbulence fractalNoise в data-URI на псевдоэлементе ::before с непрозрачностью около 0,05–0,15.

Что делает фолбэк @supports?

Если backdrop-filter не поддерживается, фон откатывается на почти сплошной rgba-оттенок без размытия.

Почему неоморфизм не стоит вешать на кнопки?

Тени не дают контраста. Режим рассчитан на панели и карточки, не на интерактивные контролы.

Elysia Tools

Навигация

Design

Генератор CSS-сниппетов: глассморфизм / неоморфизм

Сквозной генератор полного CSS-сниппета глассморфизма или неоморфизма: настройте размытие, насыщенность, непрозрачность оттенка, радиус, рамку, внешнюю тень и верхний блик; опционально — зернистая SVG feTurbulence-текстура и @supports-фолбэк; автоматически добавляется префикс -webkit-backdrop-filter (обязателен до Safari 18) и маппинг на классы Tailwind (с заметкой о различиях v3/v4), плюс живой предпросмотр карточки на градиентном фоне.

Детали

С чем помогает этот инструмент

Проверенные константы (авг. 2026): классика css.glass (rgba(255,255,255,.2), blur(5px), радиус 16px, тень 0 4px 30px); практичная композиция 2025 (blur(12px) saturate(160%), тень 0 8px 32px rgba(0,0,0,.12) + верхний inset). backdrop-filter: 95,69% (caniuse); Safari требует -webkit- до 17.x, без префикса с 18; Firefox — с 103. Зерно: feTurbulence fractalNoise data-URI на ::before (0,05–0,15); @supports откатывается на почти сплошной rgba. Tailwind: backdrop-blur-xl=24px, backdrop-saturate-150, rounded-2xl=16px; v4 сместил blur-sm с 4px на 8px — точные значения через backdrop-blur-[12px]. Неоморфизм (neumorphism.io): фон как у страницы, тёмная тень вниз-вправо + светлая вверх-влево, inset = нажатие, тёмный режим со светлой тенью 0,03–0,1; тени не считаются контрастом — не для интерактивных контролов.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Карточка «матовое стекло» по лучшей практике (blur 12 / saturate 160)

Композиция 2025: blur(12px) saturate(160%), белый оттенок 0,15, радиус 16px, рамка 0,25, многослойная тень с верхним бликом, зерно и @supports-фолбэк, плюс маппинг Tailwind с замечанием о v4.

<section class="glz">live frosted card over gradient · CSS with -webkit- prefix, ::before grain, @supports fallback · Tailwind classes</section>

Тёмный неоморфный контрол в нажатом (inset) состоянии

Неоморфная поверхность в тёмном режиме (#2d2d2d) с inset-тенями для нажатого состояния, светлая тень приглушена до 0,06 — Tailwind-вывод использует произвольные значения теней.

<section class="glz">neumorphism · dark #2d2d2d · inset 8px shadows · preview on flat dark panel · CSS + arbitrary-value Tailwind</section>

Ввод

Параметры сгруппированы, чтобы длинные формы было проще просматривать.

16 параметров

НастройкиНастройте форматы, диапазоны, числа и режимы.11

СтильselectНеобязательноРазмытие фона (px)numberНеобязательноНасыщенность фона (%)numberНеобязательноЦвет оттенка стеклаcolorНеобязательноНепрозрачность оттенкаnumberНеобязательноРадиус скругления (px)numberНеобязательноТолщина рамки (px, только стекло)numberНеобязательноНепрозрачность рамки (только стекло)numberНеобязательноНепрозрачность внешней тени (только стекло)numberНеобязательноФон неоморфизмаcolorНеобязательноДистанция тени неоморфизма (px)numberНеобязательно

ПереключателиВключайте или отключайте дополнительные режимы.5

Блик верхней кромки (inset)checkboxНеобязательноВключено, если отмеченоЗернистая текстураcheckboxНеобязательноВключено, если отмеченоФолбэк @supportscheckboxНеобязательноВключено, если отмеченоНажатое состояние (inset)checkboxНеобязательноВключено, если отмеченоТёмный режим неоморфизмаcheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Генератор CSS-сниппетов: глассморфизм / неоморфизм

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

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

Сценарии использования

Примеры

1. Карточка матового стекла (blur 12 / saturate 160)

2. Тёмный неоморфный контрол в нажатом состоянии

FAQ

SVG Примеры

Примеры Tailwind CSS

Примеры Обработки Изображений Web Python

Примеры CSS-фреймворка Bulma

Извлечение мелодического контура

Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)

Инструмент Угловых Водяных Знаков

Инструмент Диагональных Водяных Знаков

Инструменты для работы с SVG, favicon и иконками

Инструменты кодирования и конвертации аудио

Инструменты конвертации форматов изображений и анимированного экспорта

Инструменты JSON-обмена и перевода форматов