Liquid Glass Search

Code

HTML

<!-- Font Awesome Icons; Make sure to add it in the <head> tag -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- SVG Filter for Glass Distortion -->
<svg style="display: none">
  <filter id="glass-distortion">
    <feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="2" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="77" />
  </filter>
</svg>

<div class="glass-search">
  <div class="glass-filter"></div>
  <div class="glass-overlay"></div>
  <div class="glass-specular"></div>
  <div class="glass-content">
    <div class="search-container">
      <i class="fas fa-search search-icon"></i>
      <input type="text" placeholder="Search..." class="search-input">
      <button class="search-clear" aria-label="Clear search">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="search-suggestions">
      <div class="suggestion-group">
        <h4>Recent Searches</h4>
        <ul>
          <li><i class="fas fa-history"></i>Glass effect components</li>
          <li><i class="fas fa-history"></i>Modern UI design</li>
          <li><i class="fas fa-history"></i>CSS animations</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

/* Glass Navigation Container */
.glass-search {
  --bg-color: rgba(255, 255, 255, 0.25);
  --highlight: rgba(255, 255, 255, 0.75);
  --text: #ffffff;
  --input-bg: rgba(255, 255, 255, 0.1);
  --input-border: rgba(255, 255, 255, 0.2);
  --input-focus: rgba(255, 255, 255, 0.3);
  
  position: relative;
  width: 500px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.glass-filter,
.glass-overlay,
.glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.glass-filter {
  z-index: 1;
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay {
  z-index: 2;
  background: var(--bg-color);
}

.glass-specular {
  z-index: 3;
  box-shadow: inset 1px 1px 1px var(--highlight);
}

.glass-content {
  position: relative;
  z-index: 4;
  color: var(--text);
}

/* Search Container */
.search-container {
  position: relative;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-container.expanded {
  padding: 25px 20px;
}

.search-icon {
  position: absolute;
  left: 35px;
  font-size: 18px;
  color: var(--text);
  opacity: 0.8;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.search-container.expanded .search-icon {
  transform: scale(1.1);
  opacity: 1;
}

.search-input {
  width: 100%;
  padding: 12px 45px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--text);
  font-size: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow, background;
}

.search-input:focus {
  outline: none;
  background: var(--input-focus);
  border-color: var(--highlight);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.search-input:focus + .search-icon {
  opacity: 1;
  transform: scale(1.1) translateY(-2px);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  transition: opacity 0.3s ease;
}

.search-input:focus::placeholder {
  opacity: 0.4;
}

.search-clear {
  position: absolute;
  right: 35px;
  background: none;
  border: none;
  color: var(--text);
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  transition: opacity 0.3s ease;
  padding: 5px;
  border-radius: 50%;
}

.search-clear:hover {
  background: rgba(255, 255, 255, 0.1);
}

.search-input:not(:placeholder-shown) + .search-icon + .search-clear {
  opacity: 0.7;
}

/* Search Suggestions */
.search-suggestions {
  padding: 0 20px 20px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.search-suggestions.active {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.suggestion-group h4 {
  font-size: 14px;
  margin: 0 0 10px;
  opacity: 0.7;
  font-weight: 500;
}

.suggestion-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestion-group li {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateX(-10px);
}

.search-suggestions.active .suggestion-group li {
  opacity: 1;
  transform: translateX(0);
}

.suggestion-group li:nth-child(1) { transition-delay: 0.1s; }
.suggestion-group li:nth-child(2) { transition-delay: 0.15s; }
.suggestion-group li:nth-child(3) { transition-delay: 0.2s; }

.suggestion-group li:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.suggestion-group li i {
  opacity: 0.7;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.suggestion-group li:hover i {
  transform: scale(1.1);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .glass-search {
    --bg-color: rgba(0, 0, 0, 0.25);
    --highlight: rgba(255, 255, 255, 0.15);
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus: rgba(0, 0, 0, 0.3);
  }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Get all glass search elements
  const glassElements = document.querySelectorAll('.glass-search');
  const searchInput = document.querySelector('.search-input');
  const searchClear = document.querySelector('.search-clear');
  const searchSuggestions = document.querySelector('.search-suggestions');
  
  // Add mousemove effect for each glass element
  glassElements.forEach(element => {
    element.addEventListener('mousemove', handleMouseMove);
    element.addEventListener('mouseleave', handleMouseLeave);
  });
  
  // Search input interactions
  if (searchInput && searchSuggestions) {
    searchInput.addEventListener('focus', () => {
      searchSuggestions.classList.add('active');
    });
    
    searchInput.addEventListener('blur', (e) => {
      // Only hide suggestions if we're not clicking inside them
      if (!e.relatedTarget || !e.relatedTarget.closest('.search-suggestions')) {
        setTimeout(() => {
          searchSuggestions.classList.remove('active');
        }, 200);
      }
    });
    
    searchInput.addEventListener('input', (e) => {
      const hasValue = e.target.value.length > 0;
      if (hasValue) {
        searchSuggestions.classList.add('active');
      }
    });
  }
  
  // Clear button functionality
  if (searchClear && searchInput) {
    searchClear.addEventListener('click', () => {
      searchInput.value = '';
      searchInput.focus();
      searchSuggestions.classList.remove('active');
    });
  }
  
  // Handle suggestion clicks
  const suggestions = document.querySelectorAll('.suggestion-group li');
  suggestions.forEach(suggestion => {
    suggestion.addEventListener('click', () => {
      if (searchInput) {
        searchInput.value = suggestion.textContent;
        searchSuggestions.classList.remove('active');
        searchInput.focus();
      }
    });
  });
  
  // Handle mouse movement over glass elements
  function handleMouseMove(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Add highlight effect
    const specular = this.querySelector('.glass-specular');
    if (specular) {
      specular.style.background = `radial-gradient(
        circle at ${x}px ${y}px,
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.05) 30%,
        rgba(255,255,255,0) 60%
      )`;
    }
  }
  
  // Reset effects when mouse leaves
  function handleMouseLeave() {
    const filter = document.querySelector('#glass-distortion feDisplacementMap');
    if (filter) {
      filter.setAttribute('scale', '77');
    }
    
    const specular = this.querySelector('.glass-specular');
    if (specular) {
      specular.style.background = 'none';
    }
  }
});

Apple Liquid Glass Search

Live Preview

Recent Searches

Code