Liquid Glass Examples

Explore our collection of liquid glass effects with ready-to-use code. Perfect for modern interfaces.

Create Your Own

Distortion Glass V1

Beginner

Original: low blur + softer displacement

Mobile
98% love this

Styled Component

This is a sample of how your content might look inside.

Tip: Try adjusting the sliders and colors to see real-time changes!

styles.css
<!-- Distortion Glass V1: copy into a standalone HTML file -->
<div class="glass-demo-stage">
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="glass-distortion-v1" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.012 0.012" numOctaves="2" seed="92" result="noise" />
        <feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
        <feDisplacementMap in="SourceGraphic" in2="blurred" scale="85" xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </defs>
  </svg>

  <div class="liquid-glass-card">
    <div class="card-content">
      <div class="card-header">
        <div class="user-info">
          <div class="avatar">
            <svg class="avatar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <div class="user-details">
            <p class="user-name">Jane Doe</p>
            <p class="user-role">UX Designer</p>
          </div>
        </div>
        <svg class="notification-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
      </div>
      <div class="card-body">
        <h3 class="card-title">Styled Component</h3>
        <p class="card-description">This is a sample of how your content might look inside.</p>
        <button class="glass-button">Get Started</button>
      </div>
      <p class="card-tip">Tip: Try adjusting the sliders and colors to see real-time changes!</p>
    </div>
  </div>
</div>

<style>
  .glass-demo-stage {
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background:
      linear-gradient(135deg, rgba(8,12,24,0.25), rgba(8,12,24,0.55)),
      radial-gradient(circle at 22% 25%, rgba(56, 189, 248, 0.42), transparent 34%),
      radial-gradient(circle at 78% 22%, rgba(244, 114, 182, 0.36), transparent 36%),
      radial-gradient(circle at 52% 78%, rgba(96, 165, 250, 0.26), transparent 38%),
      url('/images/banner3.jpg') center/cover no-repeat;
  }

  .liquid-glass-card {
    position: relative;
    width: min(100%, 400px);
    min-height: 300px;
    border-radius: 28px;
    isolation: isolate;
    box-shadow: 0px 0px 21px -8px rgba(255, 255, 255, 0.3);
  }

  .liquid-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 28px;
    box-shadow: inset 0 0 5px -8px rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
  }

  .liquid-glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 28px;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    filter: url(#glass-distortion-v1);
    -webkit-filter: url(#glass-distortion-v1);
    pointer-events: none;
  }

  .card-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  .card-header { display: flex; justify-content: space-between; align-items: flex-start; }
  .user-info { display: flex; align-items: center; gap: 12px; }
  .avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid #3b82f6; display: flex; align-items: center; justify-content: center; }
  .avatar-icon { width: 20px; height: 20px; color: #3b82f6; }
  .user-details { display: flex; flex-direction: column; }
  .user-name { font-weight: 600; margin: 0; }
  .user-role { font-size: 12px; opacity: 0.7; margin: 0; }
  .notification-icon { width: 20px; height: 20px; opacity: 0.5; }
  .card-body { text-align: center; margin-top: 8px; }
  .card-title { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; }
  .card-description { font-size: 14px; opacity: 0.7; margin: 0 0 16px 0; }
  .glass-button { width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .card-tip { font-size: 12px; text-align: center; color: #e0e6ed; margin: 16px 0 0 0; }
</style>
Customize

Distortion Glass V2

Intermediate

New: stronger displacement + 12px blur

Mobile
94% love this

Styled Component

This is a sample of how your content might look inside.

Tip: Try adjusting the sliders and colors to see real-time changes!

styles.css
<!-- Distortion Glass V2: copy into a standalone HTML file -->
<div class="glass-demo-stage">
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="glass-distortion-v2" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.018 0.018" numOctaves="2" seed="92" result="noise" />
        <feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
        <feDisplacementMap in="SourceGraphic" in2="blurred" scale="120" xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </defs>
  </svg>

  <div class="liquid-glass-card">
    <div class="card-content">
      <div class="card-header">
        <div class="user-info">
          <div class="avatar">
            <svg class="avatar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <div class="user-details">
            <p class="user-name">Jane Doe</p>
            <p class="user-role">UX Designer</p>
          </div>
        </div>
        <svg class="notification-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
        </svg>
      </div>
      <div class="card-body">
        <h3 class="card-title">Styled Component</h3>
        <p class="card-description">This is a sample of how your content might look inside.</p>
        <button class="glass-button">Get Started</button>
      </div>
      <p class="card-tip">Tip: Try adjusting the sliders and colors to see real-time changes!</p>
    </div>
  </div>
</div>

<style>
  .glass-demo-stage {
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background:
      linear-gradient(135deg, rgba(8,12,24,0.25), rgba(8,12,24,0.55)),
      radial-gradient(circle at 22% 25%, rgba(56, 189, 248, 0.42), transparent 34%),
      radial-gradient(circle at 78% 22%, rgba(244, 114, 182, 0.36), transparent 36%),
      radial-gradient(circle at 52% 78%, rgba(96, 165, 250, 0.26), transparent 38%),
      url('/images/banner3.jpg') center/cover no-repeat;
  }

  .liquid-glass-card {
    position: relative;
    width: min(100%, 400px);
    min-height: 300px;
    border-radius: 28px;
    isolation: isolate;
    box-shadow: 0px 0px 21px -8px rgba(255, 255, 255, 0.3);
  }

  .liquid-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 28px;
    box-shadow: inset 0 0 4px -8px rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
  }

  .liquid-glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 28px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    filter: url(#glass-distortion-v2);
    -webkit-filter: url(#glass-distortion-v2);
    pointer-events: none;
  }

  .card-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  .card-header { display: flex; justify-content: space-between; align-items: flex-start; }
  .user-info { display: flex; align-items: center; gap: 12px; }
  .avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid #3b82f6; display: flex; align-items: center; justify-content: center; }
  .avatar-icon { width: 20px; height: 20px; color: #3b82f6; }
  .user-details { display: flex; flex-direction: column; }
  .user-name { font-weight: 600; margin: 0; }
  .user-role { font-size: 12px; opacity: 0.7; margin: 0; }
  .notification-icon { width: 20px; height: 20px; opacity: 0.5; }
  .card-body { text-align: center; margin-top: 8px; }
  .card-title { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; }
  .card-description { font-size: 14px; opacity: 0.7; margin: 0 0 16px 0; }
  .glass-button { width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .card-tip { font-size: 12px; text-align: center; color: #e0e6ed; margin: 16px 0 0 0; }
</style>
Customize

Vision Pro Glass

Advanced

Apple Vision Pro spatial glass

Spatial
95% love this

Vision Pro Glass

Hover to interact

styles.css
.vision-pro-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 0 48px rgba(99, 102, 241, 0.4), 0 16px 64px rgba(31, 38, 135, 0.4);
}
Customize

macOS Window

Intermediate

macOS translucent window effect

Desktop
87% love this

macOS Window

Hover to interact

styles.css
.macos-window {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.4);
}
Customize

Material Glass

Beginner

Google Material Design glass

Web
92% love this

Material Glass

Hover to interact

styles.css
.material-glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(31, 38, 135, 0.65);
}
Customize

Popular Glass Combinations

iOS + Medium Blur

Perfect for mobile interfaces

68%

Vision Pro + High Transparency

Ideal for spatial computing

45%

Material + Strong Border

Great for web applications

52%