Want to add a modern search bar to your website? In this tutorial, I’ll show you how to create a responsive 2026-style search bar using only HTML & CSS.
This design is:
-
✅ Clean & stylish
-
✅ Fully responsive for mobile and desktop
-
✅ Easy to customize (colors, icons, size)
-
✅ Beginner-friendly
Whether you’re building a portfolio, landing page, or any project that needs a sleek search feature, this search bar will instantly improve your UI.
Why this design?
Search bars are everywhere, but most look outdated. This 2026 version combines simplicity with a modern touch, making your site feel up-to-date and professional.
👉 [Watch the full tutorial here] (add your YouTube link)
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern 2026 Search Bar | CodingPorium</title> <!--Import fontawesome icons--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <style> /*Import Poppins Font*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: poppins,sans-serif; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #eef1f4, #ececec); } .search-container{ position: relative; display: flex; align-items: center; height:55px; } .search-input{ width:0px; padding: 0; opacity: 0; border:none; outline: none; border-radius:50px; background: linear-gradient(135deg, #204ecf, #3d6fff); color:#fff; font-size: 16px; transition: all 0.4s ease; box-shadow: 0 0 0 rgba(61, 109, 255, 0); } .search-input.active{ width:280px; padding:14px 22px; opacity:1; margin-left: 12px; box-shadow: 0 0 15px rgba(61, 109, 255, 0.55); } .search-input::placeholder{ color:rgba(255,255,255,0.8); } .search-btn{ width:55px; height:55px; border:none; border-radius:50%; background: linear-gradient(135deg,#3d6dff,#67a6ff); display: flex; justify-content: center; align-items: center; cursor:pointer; transition: all 0.3s ease; } .search-btn:hover{ transform:scale(1.12); box-shadow: 0 0 18px rgba(61,109,255,0.6); } .search-btn i{ color:#fff; font-size:22px; } /*Responsive on mobile*/ @media (max-width:500px){ .search-input.active{ width:200px; font-size: 14px; } } </style> </head> <body> <div class="search-container"> <button class="search-btn" id="searchBtn"><i class="fas fa-search"></i></button> <input type="text" class="search-input" id="searchInput" placeholder="Search anything..."> </div> <script> const searchBtn = document.getElementById('searchBtn'); const searchInput = document.getElementById('searchInput'); searchBtn.addEventListener('click', () => { searchInput.classList.toggle('active'); if(searchInput.classList.contains('active')){ searchInput.focus(); } }); </script> </body> </html>
✨ With just a few lines of code, you’ve built your own modern 2026 style CSS Search bar! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment