Эффекта матового стекла

Один из самых популярных эффектов в уходящем году. Давайте реализуем его!

Итак, добавим блок кода на HTML:

<div class="glass"></div>

А теперь стилизуем его:

body {
    margin: 0;
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/wp-content/uploads/2024/12/new-year-unsplash.webp') no-repeat center center/cover;
}

.glass {
    width: 300px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: rotate(-7deg);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

Такой результат у нас получится:

Для отображения эффекта матового стекла используется:

• backdrop-filter — накладывает размытие на элементы, находящиеся за объектом
• box-shadow — добавляет тень к элементу, чтобы создать глубину и выделить его на фоне
• background: rgba(255, 255, 255, 0.1) — добавляет полупрозрачность, чтобы усилить эффект.

Такой эффект лучше всего использовать с изображением в качестве фона. Так он будет выглядеть намного эффектнее!