Русский
Создавайте CSS-поверхности в стиле glass и neumorphism с живым предпросмотром.
Последнее обновление
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*Glassmorphism* и *neumorphism* — два стиля поверхностей, которые встречаешь повсюду в современном веб-дизайне. **Стекло** — это образ матового окна: полупрозрачная карточка, размывающая всё, что за ней, обычно поверх цветного градиента или фото. **Neumorphism** — образ мягкого пластика: карточка, кажущаяся выступающей (или утопленной) благодаря парам светлой/тёмной теней в тоне фона.
Оба эффекта — чистый CSS, без картинок, JS и библиотек. Стекло опирается на backdrop-filter: blur(), полупрозрачную заливку и тонкую рамку. Neumorphism собирается из пары box-shadow: одна чуть темнее поверхности, другая чуть светлее, со сдвигом в противоположных направлениях. Математика короткая, но крутить значения руками, пока всё не встанет на место, занимает время. Генератор пропускает этот шаг.
Инструмент даёт ползунки для каждого важного параметра, превью на настраиваемом фоне (чтобы стеклу было что преломлять) и копию CSS в один клик. Всё в браузере — вставляйте сниппет прямо в свою таблицу стилей.
backdrop-filter — то, что делает glassmorphism живым: размывает и насыщает то, что *позади* элемента, а не сам элемент.rgba(...) с низкой альфой) и тонкая светлая рамка — иначе эффект разваливается.box-shadow, а не одну: тёмная справа-снизу и светлый блик слева-сверху, обе в тоне поверхности, а не в чистом чёрном/белом.Переключайтесь между **Стекло** и **Neumorphism** сверху. Стеклу нужен фон; neumorphism сидит на плоской поверхности, цвет которой задаёте вы.
Для стекла главные ручки — *blur* (как сильно размыт фон), *прозрачность фона* (насколько просвечивает карточка), *tint* (лёгкий оттенок). Для neumorphism — *расстояние* (на сколько сдвинуты тени), *blur* (мягкость) и *интенсивность* (насколько спутники светлее/темнее поверхности).
Стекло лучше выглядит на ярком градиенте или фото. Neumorphism — на мягких почти-нейтральных тонах (#e0e5ec — канонический neumorphic-серый). У инструмента есть пресеты на клик.
Три варианта: **Выпуклый**, **Плоский** (те же тени без градиента) и **Утопленный** (inset). Попробуйте все — математика одна, меняется только направление.
Нажмите **Скопировать** и вставьте сниппет в стили. Вывод готов к продакшну: префикс -webkit-backdrop-filter для старого Safari, упорядоченные свойства и совпадающий border-radius — работает как один класс.
Свойства, на которых каждый эффект реально держится. Полная документация на MDN — backdrop-filter и box-shadow.
| Стиль | Ключевые свойства | Что крутить | Заметки |
|---|---|---|---|
| Стекло | backdrop-filter, полупрозрачный background, тонкий border | Blur, saturation, alpha | Всегда добавляйте -webkit-backdrop-filter для Safari |
| Neumorphism (выпуклый) | Две box-shadow + линейный градиент | Расстояние, blur, светлая/тёмная интенсивность | Цвета теней должны идти от тона поверхности, не от чистого чёрного/белого |
| Neumorphism (inset) | Две inset-box-shadow | Те же ручки, что у выпуклого | Inset — нажатая кнопка или утопленный input |
| Комбинированный | Стекло поверх neumorphic-пластины | Стекайте слои аккуратно — много фильтров рушат FPS | Часто в дашбордах: neumorphic-карточка + стеклянный header |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Классический glassmorphism. saturate(180%) добавляет насыщенности за размытием — без него стекло становится выцветшим. Положите на hero-градиент или фото.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;Тени делают всю работу: тёмная справа-снизу и светлый блик слева-сверху. Градиентная заливка добавляет тонкий блеск, который глаз читает как «пластик».
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Добавьте inset обеим теням — карточка кажется утопленной, а не выпуклой. Идеально для input'ов и фонов переключателей.
-webkit-backdrop-filter. Старый Safari (и встроенный WebView) игнорирует backdrop-filter без префикса, и стекло превращается в сплошной блок.-webkit-backdrop-filter в дополнение к стандартному backdrop-filter. Этот генератор выдаёт оба. Без префикса старый Safari и WebView на iOS откатываются к непрозрачному background и стекло пропадает.aria-label на иконочные кнопки — и не используйте neumorphism для элементов, которые *должны* выделяться (ошибки, основные CTA).backdrop-filter поддерживается во всех evergreen-браузерах. box-shadow универсален. Следите за производительностью — backdrop-filter это покадровая GPU-операция, держите число стеклянных слоёв на одном экране небольшим.