Glass Search Bar

jitesh208
Jan 17, 2026 5
Live Preview

Live Editor

<div class="scene">
  <div class="flow f1"></div>
  <div class="flow f2"></div>
  <div class="flow f3"></div>

  <div class="search-pill">
    SearchGPT...
    <span class="beam"></span>
  </div>
</div>
*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  background:black;
  display:grid;
  place-items:center;
  font-family:system-ui, -apple-system;
  overflow:hidden;
}

/* Scene */
.scene{
  position:relative;
  width:900px;
  height:360px;
}

/* Gradient flow pipes */
.flow{
  position:absolute;
  width:140%;
  height:160px;
  filter:blur(18px);
  opacity:.9;
  animation:float 8s ease-in-out infinite;
}

.f1{
  top:40px;
  background:
    linear-gradient(90deg,
      #00f5ff,
      #6a5cff,
      transparent 70%);
  transform:rotate(-12deg);
}

.f2{
  top:120px;
  background:
    linear-gradient(90deg,
      #c77dff,
      #ffb703,
      transparent 70%);
  transform:rotate(8deg);
  animation-delay:-2s;
}

.f3{
  top:200px;
  background:
    linear-gradient(90deg,
      #ff6d00,
      #ff0054,
      transparent 70%);
  transform:rotate(-6deg);
  animation-delay:-4s;
}

/* Search pill */
.search-pill{
  position:absolute;
  left:360px;
  top:150px;
  padding:16px 32px;
  border-radius:40px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(16px);
  color:#fff;
  font-size:18px;
  box-shadow:
    0 0 40px rgba(255,255,255,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* Light beam output */
.beam{
  position:absolute;
  right:-220px;
  top:50%;
  width:220px;
  height:2px;
  background:linear-gradient(90deg,#fff,transparent);
  filter:blur(1px);
  transform:translateY(-50%);
}

/* Motion */
@keyframes float{
  0%{transform:translateX(0) rotate(var(--r))}
  50%{transform:translateX(40px) rotate(var(--r))}
  100%{transform:translateX(0) rotate(var(--r))}
}
Categories

Glass Search Bar

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
