How to Create a Glowing Animated Search Bar with Icons Using HTML & CSS

🔥 How to Create a Glowing Animated Search Bar with Icons Using HTML & CSS

A stylish and functional search bar is essential for modern web interfaces. In this tutorial, we’ll show you how to create a glowing, animated search bar using only HTML, CSS, and a bit of JavaScript. We'll also add icons like a magnifying glass, Google Lens, and a clear (cancel) button to enhance user experience.

🛠️ What You'll Build

A responsive search bar
Glowing animation on focus
Magnifier icon on the left
Google Lens icon inside the bar
Cancel icon to clear the input text

Let’s get started!

📁 1. Project Setup

Start by creating a new folder and two files:

index.html
styles.css

Link Font Awesome CDN in your HTML file to access free icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

🧱 2. HTML Code Structure

Here's the complete HTML for the animated search bar:

<div class="search-container">
  <input type="text" placeholder="Search..." id="search-bar" oninput="toggleClearIcon()">
  <i class="fas fa-search search-icon"></i>
  <i class="fas fa-lens search-lens-icon"></i>
  <i class="fas fa-times clear-icon" id="clear-icon" onclick="clearSearch()"></i>
</div>

🎨 3. CSS for Styling and Animation

In your styles.css, apply styles and animation:

body {
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: sans-serif;
}

.search-container {
  position: relative;
}

.search-bar {
  width: 400px;
  padding: 15px 25px 15px 40px;
  font-size: 18px;
  border: 2px solid #444;
  border-radius: 40px;
  background-color: #222;
  color: white;
  transition: all 0.3s ease;
}

.search-icon,
.search-lens-icon,
.clear-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #bbb;
}

.search-icon { left: 15px; }
.search-lens-icon { right: 50px; pointer-events: none; }
.clear-icon {
  right: 15px;
  cursor: pointer;
  display: none;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
  }
}

.search-bar:focus {
  animation: glowPulse 1.5s infinite;
  border-color: #007bff;
}

✨ 4. JavaScript to Make It Interactive

Add this to your <script> or inside <script> tags:

function toggleClearIcon() {
  const input = document.getElementById('search-bar');
  const clearIcon = document.getElementById('clear-icon');
  clearIcon.style.display = input.value ? 'block' : 'none';
}

function clearSearch() {
  const input = document.getElementById('search-bar');
  input.value = '';
  toggleClearIcon();
}

💡 Final Output

Your glowing animated search bar is now complete! It features:

Smooth pulse animation when focused
Icons to improve clarity and usability
Real-time clear text functionality

This UI component is perfect for:

Personal portfolios
Product search interfaces
Dark-themed websites

🔍 Related Tutorials

Animated Button Hover Effects
Border Glitch Animation with CSS
Responsive Navbar with Slide Animation

📌 Conclusion

Adding glowing animations and interactive icons to your search bar not only enhances the look of your website but also improves the overall user experience. Feel free to customize the colors, animation speed, or even add voice search integration!

Did you like this design? Check out the full video tutorial on our YouTube channel! Don’t forget to subscribe for more!

How to Create a Glowing Animated Search Bar with Icons Using HTML & CSS | Glowing Animated Search Bar with Icons