После спада ажиотажа и провала столь пропагандируемого стиля неоморфизма (Neumorphism) в 2020 году многие дизайнеры и разработчики ожидали чего-то еще более худшего. Но его создатель Михаил Малевич предложил новый стиль в мире дизайна — Glassmorphism. В этой статье мы рассмотрим, как сделать глассморфизм (или стекломорфизм) с помощью CSS.
Что такое глассморфизм
Glassmorphism — новая тенденция, которая активно набирает популярность на таких сервисах, как Dribbble и Behance.
Его характерными чертами являются:
- прозрачность (эффект матового стекла);
- яркие или пастельные цвета;
- светлые границы элементов.
Как сделать глассморфизм с помощью CSS
Этого эффекта достичь довольно легко. Для этого достаточно всего лишь одного основного свойства — background-filter. Оно позволяет добавлять различные эффекты (например, blur, grayscale или hue), к области позади элемента. Поскольку оно действует по отношению ко всему, что находится позади элемента его необходимо сделать, по крайней мере, частично прозрачным.
Для создания эффекта стекломорфизма следует использовать backdrop-filter: blur().
<div class="wrap">
<div class="wrap__inner">
<div class="back-element"></div>
<div class="front-element"></div>
</div>
</div>body {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
justify-content: center;
margin: 0;
}
.wrap__inner {
position: relative;
width: 100%;
height: 478px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
}
.back-element {
position: relative;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, .4);
}
.front-element {
position: absolute;
top: 60px;
right: -60px;
width: 200px;
height: 200px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(255, 255 ,255, .4);
backdrop-filter: blur(10px);
}На примере ниже блок имеет простой фон — background: rgba(255, 255, 255, 0.4). Элемент выше является копией первого, но с дополнительным свойством backdrop-filter: blur(10px). Это самый простой пример того, как сделать глассморфизм с помощью CSS. Но мы можем пойти еще дальше, добавив border-radius, белый border и немного усилив эффект размытия.
See the Pen
eYBMmPR by Viacheslav Demchenko (@Viacheslav_Demchenko)
on CodePen.
Можно также попробовать добавить внутреннюю границу толщиной 1px с некоторой прозрачностью. Она имитирует край стекла и позволяет элементу на заднем плане выделяться больше.
В каких браузерах можно сделать эффект стекломорфизма
На момент публикации статьи свойство backdrop-filter в соответствии с данными сервиса Can I Use полностью поддерживалось браузерами Chrome, Safari, iOS, Android и Edge (об Internet Explorer речь, конечно же, не идет). В Firefox оно не доступно по умолчанию, но может быть активировано.
