Как сделать эффект стекла в css

Чтобы создать эффект стекла в CSS, можно использовать свойство backdrop-filter. Вот пример:

HTML:

<div class="container">
  <img src="image.jpg" alt="Изображение">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Текст под заголовком</p>
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px);
}

.container .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.container .content h1 {
  margin: 0;
  font-size: 36px;
  text-align: center;
}

.container .content p {
  margin-top: 10px;
  font-size: 18px;
  text-align: center;
}

В этом примере мы создаем контейнер с изображением и контентом поверх него. У нас есть два эффекта размытия: первый — filter: blur(3px); — используется для размытия изображения. Второй — backdrop-filter: blur(10px); — используется для создания эффекта стекла на контенте.

Наш контейнер имеет относительное позиционирование, а изображение имеет абсолютное позиционирование с шириной и высотой 100% и object-fit: cover, чтобы заполнить фон нашего контейнера. Контент размещается абсолютно в центре при помощи transform: translate(-50%, -50%), и у него есть небольшой белый фон с прозрачностью в 50%. Свойство backdrop-filter: blur(10px) применяет размытие на этом белом фоне, давая нам эффект стекла.

Мы также добавляем другие стили для заголовка и текста в контенте, а также скругляем края нашего контейнера с помощью свойства border-radius.