Глассморфизм | Figma

Как за 5 минут сделать очень популярный на данный момент эффект глассморфизма? Давай разбираться!

Карточка

Мы очень любим карточки, поэтому начнем с нее
Создаем прямоугольник 200х343 с закруглением углов 24

Градиент

Применяем белый линейный градиент
Верхний левый угол, прозрачность 50%
Правый нижний угол, прозрачность 0%

Размытие

Применяем эффект background blur со значением 15
НО это еще не все!

Внутренние тени

Эффект Inner shadow 2 раза
Первый X:1 Y:5 #ffffff 10%
Второй X:-1 Y:-5 #ffffff 10%

Обводка

Заливка: линейный градиент
Верхний левый угол: #ffffff 50%
Нижний правый угол: #ffffff 20%

Внешние тени

Эффект Drop shadow
Первый X:20 Y:20 #000000 5% blur:100

Нужные элементы

Добавляем необходимые для любой карточки атрибуты

И готово!

https://ssites.spb.ru