Всем привет!
Хочу показать вам пример создание эффекта стекла (GlassMorphism) в программе Figma. Итак, давайте приступим.
01. Создаем фигуру
Для создания данного эффекта и наглядного примера, создадим несколько окружностей, а над ними создадим
прямоугольник и скруглим углы на ваше усмотрение
Corner Radius: 30
02. Применение градиента
Следующим действием будет применение градиента в качестве заливки. Данный момент придаст небольшой эффект стекла.
Цвет 1: FFFFFF (прозрачность 40%)
Цвет 2: FFFFFF (прозрачность 10%)
03. Применение размытие фона
Размытие имитирует стекло, имитирует эффект размытия, преломление света. Установите значение около 20, но вы можете играть со своими настройками.
Background Blur: 20
04. Добавим обводку
Если вы добавите хороший градиент на обводку, это придаст реалистичности вашему стеклу. Я использовал обводку в 3px.
Цвет 1: FFFFFF (прозрачность 50%)
Цвет 2: FFFFFF (прозрачность 0%)
Цвет 3: A64CED (прозрачность 0%)
Цвет 4: A64CED (прозрачность 50%)
05. Добавим тень
Тени добавляют приятную визуальную иерархию к стеклянной поверхности.
Цвет 1: FFFFFF (прозрачность 10%)
X: 0 Y: 1
Blur: 25
Spread: -5
06. Заполним контентом
Используйте прозрачный текстовые слои с режимом смешивания Overlay и Opacity - 60%
Вот так, буквально в 6 шагов, мы создали модный эффект в веб-дизайне.
Если понравилось, ставь лайк, меня это будет мотивировать к новым урокам. Спасибо за внимание!
