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

748

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)

4 months ago

375
Search bar with filter options

Author:
Piet Vriend

2 years ago

25k
Search input

Author:
Leon Bachmann

2 years ago

10.7k
Light yellow gradient

Author:
Mohit Prajapati

3 years ago

9.3k
Text with gradient underline
Gradient Underline Text. Decorate your text with a gradient underline for a modern touch.

Author:
Anonymous

1 year ago

10.1k
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

1 year ago

3k
CTA Search Section
CTA search form

Author:
EliteAI Tools

9 months ago

862
Search box
Search bar with a button inside

Author:
Anonymous

1 year ago

3.5k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

7 months ago

1.4k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
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)

4 months ago

491
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

3 months ago

901

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components