Найти в Дзене

Эффект глассморфизма | Figma

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

Карточка

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

https://ssites.spb.ru
https://ssites.spb.ru

Градиент

Применяем белый линейный градиент

Верхний левый угол, прозрачность 50%

Правый нижний угол, прозрачность 0%

https://ssites.spb.ru
https://ssites.spb.ru

Размытие

Применяем эффект background blur со значением 15

НО это еще не все!

https://ssites.spb.ru
https://ssites.spb.ru

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

Эффект Inner shadow 2 раза

Первый X:1 Y:5 #ffffff 10%

Второй X:-1 Y:-5 #ffffff 10%

https://ssites.spb.ru
https://ssites.spb.ru

Обводка

Заливка: линейный градиент

Верхний левый угол: #ffffff 50%

Нижний правый угол: #ffffff 20%

https://ssites.spb.ru
https://ssites.spb.ru

Внешние тени

Эффект Drop shadow

Первый X:20 Y:20 #000000 5% blur:100

-6

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

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

https://ssites.spb.ru
https://ssites.spb.ru

И готово!

https://ssites.spb.ru
https://ssites.spb.ru

https://ssites.spb.ru