Как сделать глассморфизм с помощью HTML и CSS

В связи с тем что, после спада ажиотажа стиля неоморфизма (neumorphism) в 2020 году многие дизайнеры и разработчики ожидали чего-то ещё более худшего. Но его создатель Михаил Малевич предложил новый стиль в мире дизайна — глассморфизм (glassmorphism). В этой статье мы рассмотрим, как сделать глассморфизм (или стекломорфизм) с помощью HTML и CSS.

Что такое глассморфизм

Glassmorphism — новая тенденция, которая уже набрала достаточно широкую популярность на таких сервисах, как Dribbble и Behance.

Его характерными чертами являются:

• прозрачность (эффект матового стекла);
• яркие или пастельные цвета;
• светлые границы элементов.

Как сделать глассморфизм с помощью HTML и CSS

Стоит отметить, что достичь этого эффекта довольно легко. Для этого достаточно всего лишь одного основного свойства — background-filter: blur(). Оно позволяет добавлять различные эффекты (например, blur, grayscale или hue), к области позади элемента. Поскольку оно действует по отношению ко всему, что находится позади элемента его необходимо сделать, по крайней мере, частично прозрачным.

Читайте также: Пора решиться на прекращение поддержки Internet Explorer.

Для создания эффекта стекломорфизма приведём пример HTML и CSS кода:

<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). Это самый простой пример того, как сделать глассморфизм. Но мы можем пойти еще дальше, добавив border-radius, белый border и немного усилив эффект размытия.

Читайте также: Как сделать вертикальный текст.

See the Pen
eYBMmPR by Viacheslav Demchenko (@Viacheslav_Demchenko)
on CodePen.

Можно улучшить визуально полученный результат. Например, попробовать добавить внутреннюю границу толщиной 1px с некоторой прозрачностью. Она имитирует край стекла и позволяет элементу на заднем плане выделяться больше.

Кроссбраузерность

Свойство backdrop-filter: blur() можно реализовать во всех популярных браузерах за исключением Internet Explorer, а Safari оно требует префикса -webkit-.