Home
Muhamad Rufaid kv
Glassmorphic Animated Searchabar

Glassmorphic Animated Searchabar

This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

This tailwind example is contributed by Muhamad Rufaid kv, on 04-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is find

Search Bar Gradient

Author Muhamad Rufaid kv

768

2

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Glassmorphic Search Bar</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* For backdrop blur effect */
    .glass {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

/* Smooth animation */
    .transition-width {
      transition: width 0.4s ease;
    }
  </style>
</head>
<body class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600">

<div class="relative">
    <input
      type="text"
      placeholder="Search..."
      class="glass bg-white/10 border border-white/20 text-white placeholder-white px-4 py-2 rounded-full w-40 focus:w-64 transition-width duration-500 ease-in-out focus:outline-none focus:ring-2 focus:ring-white/30"
    />
    <svg
      class="absolute right-3 top-2.5 w-5 h-5 text-white pointer-events-none"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1010.5 3a7.5 7.5 0 006.15 13.65z"
      />
    </svg>
  </div>

</body>
</html>

Related Examples

Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

756
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Animated Search Input
Expand on focus with smooth animation

Author:
Anonymous

1 year ago

2.2k
Search bar with icon

Author:
Steven Kuhn

3 years ago

14.8k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

511
CTA Search Section
CTA search form

Author:
EliteAI Tools

9 months ago

1k
Gradient progress bar
A progress bar with gradient

Author:
Dujardin Emmanuel

6 months ago

340
Frorest Green Gradient

Author:
Mohit Prajapati

3 years ago

12.4k
Simple search input field

Author:
Santos78

2 years ago

12.6k
Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

4 months ago

663
Aggressive red gradient

Author:
Mohit Prajapati

3 years ago

9.1k
Soft color gradient

Author:
Mohit Prajapati

3 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12