<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NeoMorphism Search</title>
</head>

<body>
  <div class="searchBox">
    <div class="shadow"></div>
    <input type="text" placeholder="Search..." />
    <ion-icon name="search-outline"></ion-icon>>
  </div>

  <!-- IonIcons Script -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #cfd1e1;
  overflow: hidden;
}

.shadow {
  position: absolute;
  top: 3px;
  left: -35px;
  width: calc(100% + 34px);
  height: 300px;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), transparent, transparent);
  transform-origin: top;
  transform: skew(45deg);
  pointer-events: none;
}

.shadow::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 35px;
  background: #cfd1e1;
  z-index: 1;
}

.searchBox {
  position: relative;
  width: 60px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.searchBox:hover {
  width: 400px;
}

.searchBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(#fff, #fff, #e3e3e3);
  z-index: 1;
  filter: blur(1px);
}

.searchBox::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 0.8px;
  width: 10px;
  height: 100%;
  background: #9d9d9d;
  z-index: 1;
  filter: blur(1px);
}

.searchBox input {
  position: relative;
  width: 100%;
  height 100%;
  border: none;
  padding: 10px 25px;
  outline: none;
  font-size: 1.1em;
  color: #555;
  background: linear-gradient(#dbdae1, #a3aaba);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.1),
  15px 15px 15px rgba(0,0,0,0.1),
  20px 20px 15px rgba(0,0,0,0.1),
  30px 30px 15px rgba(0,0,0,0.1),
  inset 1px 1px 2px #fff;
}

.searchBox input::placeholder,
.searchBox input
{
  color: transparent;
  transition: 0.5s;
}

.searchBox:hover input::placeholder,
.searchBox:hover input
{
  color: #555;
}

ion-icon {
  position: absolute;
  right: 20px;
  color: #555;
  font-size: 1.5em;
  cursor: pointer;
}

// Only used script for icons :)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.