Как создается эффект трехмерного стекла в веб-дизайне?

Эффект трёхмерного стекла в веб-дизайне создаётся с помощью глассморфизма — эффекта «матового стекла». 14

Процесс включает несколько шагов: 4

1. Выбор фигуры. 4 Необходимо создать пространство, которое позже станет стеклянным. 4 Это может быть маленькая иконка или рабочая область, в которой отображается контент. 4
2. Добавление фона. 4 Можно использовать градиентную заливку или добавить бэкграунд в виде картинки. 4 В большинстве случаев для создания «матового стекла» используют яркий фон с геометрическими фигурами. 4
3. Настройка размытия. 4 Стеклянная поверхность появляется благодаря размытию фона. 4 Нижняя подложка после этого выглядит как пятно, а контент просматривается через слой. 4
4. Добавление границы. 4 Если не использовать обводку по контуру, выделенная область будет слишком тонкой. 4
5. Создание тени. 4 Лёгкая тень проводит границу между слоями. 4 Они связаны между собой, но приоритет отличается. 4
6. Наполнение контентом. 4 Остаётся добавить в центральную область содержимое, которое будет «лежать» на поверхности. 4

Повторить эффект матового стекла можно в Adobe Photoshop, Figma и во многих других графических редакторах. 1