Neumorphic Search Bar Design with HTML and CSS

In this tutorial we will see how to make a Neumorphic Search Bar Design with HTML and CSS. Simple CSS is used for this purpose, HTML code and CSS code is given.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below.

<div class="search-box">
    <p>Search for your solution</p>
    <div class="box">
        <input type="search" class="search">
        <span class="search-icon">🔍</span>
    </div>
</div>  

CSS Code

CSS Code is given below.

<style>
body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Barlow Condensed',sans-serif;
    background-color: #B1A0EB;
}
.search-box
{
    width: 100%;
    max-width: 300px;
    background-color: #B1A0EB;
    padding: 5px 20px;
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: 0.1s;
}
.search-box:hover
{
    box-shadow: 2px 2px 5px 0px #9A8AD4;
    border-bottom: 3px solid #9A8AD4;
    border-right: 3px solid #9A8AD4;
    border-left: 1px solid #C8B8FC;
    border-top: 1px solid #C8B8FC;
}
.search-box p
{
    color: #555;
    margin: 5px 0px;
}
.box
{
    display: flex;
    margin: 10px 0px;
}
.search
{
    width: 80%;
    max-width: 300px;
    background-color: #B1A0EB;
    outline: none;
    border: 0px;
    padding: 15px 10px;
    border-radius: 8px;
    margin-right: 10px;
    color: #555;
    box-shadow: inset 0px 0px 10px #9A8AD4;
}
.search-icon
{
    width: 20%;
    max-width: 50px;
    padding: 10px 0px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 1px 1px 5px 0px #9A8AD4;
    border-bottom: 2px solid #9A8AD4;
    border-right: 2px solid #9A8AD4;
    border-left: 1px solid #C8B8FC;
    border-top: 1px solid #C8B8FC;
    box-sizing: border-box;
    transition: 0.1s;
}
</style>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Neumorphic Search Bar Design with HTML and CSS.