Liquid Glass - Apple - iOS - macOS - iPadOS - watchOS - visionOS - 26 - 2025 - Жидкое стекло

index.html

  <!-- developed © Maxuiux -->

  <main class="container">
    <div class="glass-card">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <span>Жидкое стекло</span>
      </div>

    </div>

    <div class="glass-card">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <span>Жидкое стекло</span>
      </div>
    </div>

    <div class="glass-card">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <span>Жидкое стекло</span>
      </div>
    </div>
  </main>

  <a href="https://t.me/maxuiuxpro" class="subscribe" target="_blank">
    <div class="subscribe__wrap">
      <div class="subscribe__icon">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="16" cy="16" r="14" fill="url(#paint0_linear_1_13647)" />
          <path
            d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z"
            fill="white" />
          <defs>
            <linearGradient id="paint0_linear_1_13647" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
              <stop stop-color="#37BBFE" />
              <stop offset="1" stop-color="#007DBB" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="subscribe__text">
        Подписаться
      </div>
    </div>
  </a>

  <svg style="display: none">
    <filter id="liquid-lens" x="-50%" y="-50%" width="200%" height="200%">
      <feImage x="0" y="0" result="normalMap" xlink:href="data:image/svg+xml;utf8,
               <svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>
                 <radialGradient id='nmap' cx='50%' cy='50%' r='50%'>
                   <stop offset='0%' stop-color='rgb(128,128,255)'/>
                   <stop offset='100%' stop-color='rgb(255,255,255)'/>
                 </radialGradient>
                 <rect width='100%' height='100%' fill='url(#nmap)'/>
               </svg>" />
      <feDisplacementMap in="SourceGraphic" in2="normalMap" scale="60" xChannelSelector="R" yChannelSelector="G"
        result="displaced" />
      <feMerge>
        <feMergeNode in="displaced" />
      </feMerge>
    </filter>
  </svg>

  <!-- developed © Maxuiux -->

liquid-glass-apple-ios-macos-ipados-watchos-visionos-26-2025.markdown

Liquid Glass - Apple - iOS - macOS - iPadOS - watchOS - visionOS - 26 - 2025 - Жидкое стекло

Liquid Glass - Apple - iOS - macOS - iPadOS - watchOS - visionOS - 26 - 2025 - Жидкое стеклоOpen in Editor Liquid Glass - Apple - iOS - macOS - iPadOS - watchOS - visionOS - 26 - 2025 - Жидкое стекло

A Pen by maxuiux on CodePen.

License.

script.js

/* developed © Maxuiux */  

document.addEventListener('DOMContentLoaded', () => {
  const target = document.querySelector('.subscribe');

  setTimeout(() => {
    target.classList.add('active');
  }, 4000);
});

/* developed © Maxuiux */  

style.css

/* developed © Maxuiux */

:root {
  --lg-bg-color: rgba(255, 255, 255, 0.15);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --lg-text: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: url("https://raw.githubusercontent.com/maxuiux/codepen/refs/heads/main/images/macbook/macOS-Tahoe-26-Light.png");
  background-size: 110%;
  background-repeat: repeat-x;
  animation: moveBackground 5s ease-in-out infinite alternate;
  position: relative;

  @media(max-width:1110px) {
    background-size: cover;
  }
}

@keyframes moveBackground {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 0;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 42px;
}

.glass-card {
  position: relative;
  width: 320px;
  height: 220px;
  border-radius: 34px;
  overflow: hidden;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(255, 255, 255, 0.05);
  background: transparent;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-card:hover {
  scale: 1.2;
}

.glass-filter {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: url(#liquid-lens);
  /* isolation: isolate; */
}

.glass-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--lg-bg-color);
}

.glass-specular {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 5px var(--lg-highlight);
}

.glass-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lg-text);
  font-size: 1.4rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.subscribe {
  display: block;
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 9999;
  text-decoration: none;
  border-radius: 100px;
  scale: 1;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(255, 255, 255, 0.05);
}

.subscribe.active {
  opacity: 1;
}

.subscribe:hover {
  scale: 1.1;
}

.subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  filter: url(#liquid-lens);
}

.subscribe::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 5px var(--lg-highlight);
  border-radius: 100px;
}

.subscribe__wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  position: relative;
}

.subscribe__icon svg {
  width: 38px;
  height: 38px;
}

.subscribe__text {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

/* developed © Maxuiux */