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

1.3k

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">

</body>
</html>

Related Examples

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

877
Aggressive red gradient

Author:
Mohit Prajapati

3 years ago

9.3k
Search bar with filter options

Author:
Piet Vriend

3 years ago

25.6k
Full width search section with title

Author:
TailwindFlex

3 years ago

12.3k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

756
Border gradient

Author:
Samuel Dawson

3 years ago

16.9k
Responsive Search bar

Author:
Prajwal Hallale

3 years ago

12.3k
Green and blue gradient

Author:
Mohit Prajapati

2 years ago

12.1k
Search form

Author:
Laurits

3 years ago

11.8k
Frorest Green Gradient

Author:
Mohit Prajapati

3 years ago

12.6k
hero modern
hero modern

Author:
Omer fils ELENGA

2 months ago

129
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components