# Генератор CSS-сниппетов: глассморфизм / неоморфизм Сквозной генератор полного CSS-сниппета глассморфизма или неоморфизма: настройте размытие, насыщенность, непрозрачность оттенка, радиус, рамку, внешнюю тень и верхний блик; опционально — зернистая SVG feTurbulence-текстура и @supports-фолбэк; автоматически добавляется префикс -webkit-backdrop-filter (обязателен до Safari 18) и маппинг на классы Tailwind (с заметкой о различиях v3/v4), плюс живой предпросмотр карточки на градиентном фоне. > Каноническая страница: https://elysiatools.com/ru/tools/glassmorphism-css-snippet-builder - **Категория:** Design - **Ключевые слова:** глассморфизм, неоморфизм, backdrop-filter, матовое стекло, css генератор, стеклянная карточка ## Обзор Проверенные константы (авг. 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; тени не считаются контрастом — не для интерактивных контролов. ## Входные данные - **Стиль** (select) - **Размытие фона (px)** (number) - **Насыщенность фона (%)** (number) - **Цвет оттенка стекла** (color) - **Непрозрачность оттенка** (number) - **Радиус скругления (px)** (number) - **Толщина рамки (px, только стекло)** (number) - **Непрозрачность рамки (только стекло)** (number) - **Непрозрачность внешней тени (только стекло)** (number) - **Блик верхней кромки (inset)** (checkbox) - **Зернистая текстура** (checkbox) - **Фолбэк @supports** (checkbox) - **Фон неоморфизма** (color) - **Дистанция тени неоморфизма (px)** (number) - **Нажатое состояние (inset)** (checkbox) - **Тёмный режим неоморфизма** (checkbox) ## Когда использовать - Когда нужна стеклянная карточка с backdrop-filter, рамкой и многослойной тенью поверх градиента. - Когда собираете мягкий Soft UI: фон страницы, парные тени и нажатое inset-состояние. - Когда нужен сниппет сразу с -webkit-префиксом, зерном на ::before, фолбэком и Tailwind-классами. ## Как это работает - Выберите стиль: глассморфизм (матовое стекло) или неоморфизм (Soft UI). - Задайте размытие, насыщенность, цвет и непрозрачность оттенка, радиус скругления; для стекла — толщину и прозрачность рамки, тень и верхний блик. - Включите зернистую feTurbulence-текстуру и @supports-фолбэк или для неоморфизма настройте цвет фона, дистанцию теней, inset и тёмный режим. - Скопируйте CSS (с -webkit-backdrop-filter) и Tailwind-маппинг, проверьте карточку в живом предпросмотре. ## Сценарии использования - Стеклянные карточки дашборда с размытием 12px, насыщенностью 160% и верхним inset-бликом. - Неоморфные панели: фон как у страницы, тёмная тень вниз-вправо и светлая вверх-влево. - Тёмный inset-контрол с приглушённой светлой тенью и произвольными Tailwind-значениями. ## Частые вопросы ### Какие значения размытия и насыщенности стоят по умолчанию? Для стекла: 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-оттенок без размытия. ### Почему неоморфизм не стоит вешать на кнопки? Тени не дают контраста. Режим рассчитан на панели и карточки, не на интерактивные контролы. ## Связанные инструменты - [Извлечение мелодического контура](https://elysiatools.com/ru/tools/audio-melody-contour-extractor): Извлекает ведущую мелодию и помещает MIDI, события нот, контур высоты, SVG и JSON в ZIP. - [Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/ru/tools/font-file-inspector): Загрузите шрифт TTF, OTF, WOFF или WOFF2 (WOFF2 автоматически распаковывается) и изучите все метаданные: семейство/подсемейство/дизайнер/копирайт/версия, число глифов, unitsPerEm, насыщенность и ширину, угол наклона, флаги стиля и bounding box; тепловую карту покрытия по блокам Юникода; SVG-предпросмотр глифов (свой текст, автосбор для иконочных шрифтов); лигатуры liga и возможности OpenType; оси fvar и именованные экземпляры вариативных шрифтов. - [Инструмент Угловых Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-corner): Добавляйте угловые водяные знаки на изображения с настраиваемым позиционированием, размером, прозрачностью и опциями нескольких углов - [Инструмент Диагональных Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-diagonal): Добавляйте диагональные водяные знаки на изображения с настраиваемым углом, размером, прозрачностью и позиционированием вдоль диагонали - [Инструмент Водяных Знаков с Изображением](https://elysiatools.com/ru/tools/image-watermark-image): Добавляйте водяные знаки изображений на изображения с настраиваемым положением, размером, прозрачностью и вращением - [Инструмент Прозрачности Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-opacity): Добавляйте водяные знаки с пользовательской прозрачностью на изображения, поддерживая текстовые и графические водяные знаки с расширенным контролем прозрачности - [Инструмент Мозаичных Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-tile): Добавляйте мозаичные водяные знаки на изображения с настраиваемым размером, прозрачностью, интервалами и узорами - [Извлекатель данных из SVG-графиков](https://elysiatools.com/ru/tools/svg-chart-to-data-extractor): Извлекает точки данных из SVG-структур линий, столбцов и круговых диаграмм ## Примеры - [SVG Примеры](https://elysiatools.com/ru/samples/svg-samples): Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG - [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией - [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата - [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS ## Связанные материалы - [Инструменты для работы с SVG, favicon и иконками](https://elysiatools.com/ru/hubs/svg-favicon-icon-workflows): Собирайте favicon-пакеты, оптимизируйте SVG, конвертируйте иконки между ICO, PNG, JPG, WebP и SVG и готовьте web-ready assets в одном хабе. - [Инструменты кодирования и конвертации аудио](https://elysiatools.com/ru/hubs/audio-convert): Сравните инструменты конвертации аудиоформатов, изменения битрейта, частоты дискретизации, смены кодека и экспорта в одном хабе. - [Инструменты конвертации форматов изображений и анимированного экспорта](https://elysiatools.com/ru/hubs/image-convert): Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе. - [Инструменты JSON-обмена и перевода форматов](https://elysiatools.com/ru/hubs/json-convert): Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе.