Рассмотрим один из вариантов реализации эффекта жидкого стекла в дизайне сайта
Начало осени 2025 года ознаменовалось выходом iOS 26, которая доступна для всех смартфонов Apple, начиная с 11-й версии и выше. Интерфейс этой операционной системы имеет эффект liquid glass (жидкое стекло) и очевидно, что такой дизайн интерфейса будет в тренде ближайшие несколько лет. Поэтому имеет смысл внедрить данный дизайн на свой сайт. В этой статье мы рассмотрим один из вариантов реализации подобного эффекта. Ниже представлены стили:
.glass-effect {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}
Как видно, основная идея эффекта жидкого стекла заключается в размытии фона белого цвета с высокой прозрачностью. А применение темы здесь нужно для эффекта прохождения света через блок. На первом изображении показана верстка popup-формы c темным полупрозрачным overlay. А на втором изображении то же самое после применения эффекта liquid glass. При этом к оверлею тоже были применены стили размытия и прозрачности:
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
Теперь можно присвоить класс .glass-effect тому блоку, для которого хотите применить эффект жидкого стекла.