Эффект жидкого стекла на сайте

Начало осени 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 тому блоку, для которого хотите применить эффект жидкого стекла.