1<div class="grid"></div>
 2<div id="poda">
 3  <div class="glow"></div>
 4  <div class="darkBorderBg"></div>
 5  <div class="darkBorderBg"></div>
 6  <div class="darkBorderBg"></div>
 7 
 8  <div class="white"></div>
 9 
10  <div class="border"></div>
11 
12  <div id="main">
13    <input placeholder="Search..." type="text" name="text" class="input" />
14    <div id="input-mask"></div>
15    <div id="pink-mask"></div>
16    <div class="filterBorder"></div>
17    <div id="filter-icon">
18      <svg
19        preserveAspectRatio="none"
20        height="27"
21        width="27"
22        viewBox="4.8 4.56 14.832 15.408"
23        fill="none"
24      >
25        <path
26          d="M8.16 6.65002H15.83C16.47 6.65002 16.99 7.17002 16.99 7.81002V9.09002C16.99 9.56002 16.7 10.14 16.41 10.43L13.91 12.64C13.56 12.93 13.33 13.51 13.33 13.98V16.48C13.33 16.83 13.1 17.29 12.81 17.47L12 17.98C11.24 18.45 10.2 17.92 10.2 16.99V13.91C10.2 13.5 9.97 12.98 9.73 12.69L7.52 10.36C7.23 10.08 7 9.55002 7 9.20002V7.87002C7 7.17002 7.52 6.65002 8.16 6.65002Z"
27          stroke="#d6d6e6"
28          stroke-width="1"
29          stroke-miterlimit="10"
30          stroke-linecap="round"
31          stroke-linejoin="round"
32        ></path>
33      </svg>
34    </div>
35    <div id="search-icon">
36      <svg
37        xmlns="http://www.w3.org/2000/svg"
38        width="24"
39        viewBox="0 0 24 24"
40        stroke-width="2"
41        stroke-linejoin="round"
42        stroke-linecap="round"
43        height="24"
44        fill="none"
45        class="feather feather-search"
46      >
47        <circle stroke="url(#search)" r="8" cy="11" cx="11"></circle>
48        <line
49          stroke="url(#searchl)"
50          y2="16.65"
51          y1="22"
52          x2="16.65"
53          x1="22"
54        ></line>
55        <defs>
56          <linearGradient gradientTransform="rotate(50)" id="search">
57            <stop stop-color="#f8e7f8" offset="0%"></stop>
58            <stop stop-color="#b6a9b7" offset="50%"></stop>
59          </linearGradient>
60          <linearGradient id="searchl">
61            <stop stop-color="#b6a9b7" offset="0%"></stop>
62            <stop stop-color="#837484" offset="50%"></stop>
63          </linearGradient>
64        </defs>
65      </svg>
66    </div>
67  </div>
68</div>      

  1.grid {
  2  height: 800px;
  3  width: 800px;
  4  background-image: linear-gradient(to right, #0f0f10 1px, transparent 1px),
  5    linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
  6  background-size: 1rem 1rem;
  7  background-position: center center;
  8  position: absolute;
  9  z-index: -1;
 10  filter: blur(1px);
 11}
 12.white,
 13.border,
 14.darkBorderBg,
 15.glow {
 16  max-height: 70px;
 17  max-width: 314px;
 18  height: 100%;
 19  width: 100%;
 20  position: absolute;
 21  overflow: hidden;
 22  z-index: -1;
 23  /* Border Radius */
 24  border-radius: 12px;
 25  filter: blur(3px);
 26}
 27.input {
 28  background-color: #010201;
 29  border: none;
 30  /* padding:7px; */
 31  width: 301px;
 32  height: 56px;
 33  border-radius: 10px;
 34  color: white;
 35  padding-inline: 59px;
 36  font-size: 18px;
 37}
 38#poda {
 39  display: flex;
 40  align-items: center;
 41  justify-content: center;
 42}
 43.input::placeholder {
 44  color: #c0b9c0;
 45}
 46 
 47.input:focus {
 48  outline: none;
 49}
 50 
 51#main:focus-within > #input-mask {
 52  display: none;
 53}
 54 
 55#input-mask {
 56  pointer-events: none;
 57  width: 100px;
 58  height: 20px;
 59  position: absolute;
 60  background: linear-gradient(90deg, transparent, black);
 61  top: 18px;
 62  left: 70px;
 63}
 64#pink-mask {
 65  pointer-events: none;
 66  width: 30px;
 67  height: 20px;
 68  position: absolute;
 69  background: #cf30aa;
 70  top: 10px;
 71  left: 5px;
 72  filter: blur(20px);
 73  opacity: 0.8;
 74  //animation:leftright 4s ease-in infinite;
 75  transition: all 2s;
 76}
 77#main:hover > #pink-mask {
 78  //animation: rotate 4s linear infinite;
 79  opacity: 0;
 80}
 81 
 82.white {
 83  max-height: 63px;
 84  max-width: 307px;
 85  border-radius: 10px;
 86  filter: blur(2px);
 87}
 88 
 89.white::before {
 90  content: "";
 91  z-index: -2;
 92  text-align: center;
 93  top: 50%;
 94  left: 50%;
 95  transform: translate(-50%, -50%) rotate(83deg);
 96  position: absolute;
 97  width: 600px;
 98  height: 600px;
 99  background-repeat: no-repeat;
100  background-position: 0 0;
101  filter: brightness(1.4);
102  background-image: conic-gradient(
103    rgba(0, 0, 0, 0) 0%,
104    #a099d8,
105    rgba(0, 0, 0, 0) 8%,
106    rgba(0, 0, 0, 0) 50%,
107    #dfa2da,
108    rgba(0, 0, 0, 0) 58%
109  );
110  //  animation: rotate 4s linear infinite;
111  transition: all 2s;
112}
113.border {
114  max-height: 59px;
115  max-width: 303px;
116  border-radius: 11px;
117  filter: blur(0.5px);
118}
119.border::before {
120  content: "";
121  z-index: -2;
122  text-align: center;
123  top: 50%;
124  left: 50%;
125  transform: translate(-50%, -50%) rotate(70deg);
126  position: absolute;
127  width: 600px;
128  height: 600px;
129  filter: brightness(1.3);
130  background-repeat: no-repeat;
131  background-position: 0 0;
132  background-image: conic-gradient(
133    #1c191c,
134    #402fb5 5%,
135    #1c191c 14%,
136    #1c191c 50%,
137    #cf30aa 60%,
138    #1c191c 64%
139  );
140  // animation: rotate 4s 0.1s linear infinite;
141  transition: all 2s;
142}
143.darkBorderBg {
144  max-height: 65px;
145  max-width: 312px;
146}
147.darkBorderBg::before {
148  content: "";
149  z-index: -2;
150  text-align: center;
151  top: 50%;
152  left: 50%;
153  transform: translate(-50%, -50%) rotate(82deg);
154  position: absolute;
155  width: 600px;
156  height: 600px;
157  background-repeat: no-repeat;
158  background-position: 0 0;
159  background-image: conic-gradient(
160    rgba(0, 0, 0, 0),
161    #18116a,
162    rgba(0, 0, 0, 0) 10%,
163    rgba(0, 0, 0, 0) 50%,
164    #6e1b60,
165    rgba(0, 0, 0, 0) 60%
166  );
167  transition: all 2s;
168}
169#poda:hover > .darkBorderBg::before {
170  transform: translate(-50%, -50%) rotate(262deg);
171}
172#poda:hover > .glow::before {
173  transform: translate(-50%, -50%) rotate(240deg);
174}
175#poda:hover > .white::before {
176  transform: translate(-50%, -50%) rotate(263deg);
177}
178#poda:hover > .border::before {
179  transform: translate(-50%, -50%) rotate(250deg);
180}
181 
182#poda:hover > .darkBorderBg::before {
183  transform: translate(-50%, -50%) rotate(-98deg);
184}
185#poda:hover > .glow::before {
186  transform: translate(-50%, -50%) rotate(-120deg);
187}
188#poda:hover > .white::before {
189  transform: translate(-50%, -50%) rotate(-97deg);
190}
191#poda:hover > .border::before {
192  transform: translate(-50%, -50%) rotate(-110deg);
193}
194 
195#poda:focus-within > .darkBorderBg::before {
196  transform: translate(-50%, -50%) rotate(442deg);
197  transition: all 4s;
198}
199#poda:focus-within > .glow::before {
200  transform: translate(-50%, -50%) rotate(420deg);
201  transition: all 4s;
202}
203#poda:focus-within > .white::before {
204  transform: translate(-50%, -50%) rotate(443deg);
205  transition: all 4s;
206}
207#poda:focus-within > .border::before {
208  transform: translate(-50%, -50%) rotate(430deg);
209  transition: all 4s;
210}
211 
212.glow {
213  overflow: hidden;
214  filter: blur(30px);
215  opacity: 0.4;
216  max-height: 130px;
217  max-width: 354px;
218}
219.glow:before {
220  content: "";
221  z-index: -2;
222  text-align: center;
223  top: 50%;
224  left: 50%;
225  transform: translate(-50%, -50%) rotate(60deg);
226  position: absolute;
227  width: 999px;
228  height: 999px;
229  background-repeat: no-repeat;
230  background-position: 0 0;
231  /*border color, change middle color*/
232  background-image: conic-gradient(
233    #000,
234    #402fb5 5%,
235    #000 38%,
236    #000 50%,
237    #cf30aa 60%,
238    #000 87%
239  );
240  /* change speed here */
241  //animation: rotate 4s 0.3s linear infinite;
242  transition: all 2s;
243}
244 
245@keyframes rotate {
246  100% {
247    transform: translate(-50%, -50%) rotate(450deg);
248  }
249}
250@keyframes leftright {
251  0% {
252    transform: translate(0px, 0px);
253    opacity: 1;
254  }
255 
256  49% {
257    transform: translate(250px, 0px);
258    opacity: 0;
259  }
260  80% {
261    transform: translate(-40px, 0px);
262    opacity: 0;
263  }
264 
265  100% {
266    transform: translate(0px, 0px);
267    opacity: 1;
268  }
269}
270 
271#filter-icon {
272  position: absolute;
273  top: 8px;
274  right: 8px;
275  display: flex;
276  align-items: center;
277  justify-content: center;
278  z-index: 2;
279  max-height: 40px;
280  max-width: 38px;
281  height: 100%;
282  width: 100%;
283 
284  isolation: isolate;
285  overflow: hidden;
286  /* Border Radius */
287  border-radius: 10px;
288  background: linear-gradient(180deg, #161329, black, #1d1b4b);
289  border: 1px solid transparent;
290}
291.filterBorder {
292  height: 42px;
293  width: 40px;
294  position: absolute;
295  overflow: hidden;
296  top: 7px;
297  right: 7px;
298  border-radius: 10px;
299}
300 
301.filterBorder::before {
302  content: "";
303 
304  text-align: center;
305  top: 50%;
306  left: 50%;
307  transform: translate(-50%, -50%) rotate(90deg);
308  position: absolute;
309  width: 600px;
310  height: 600px;
311  background-repeat: no-repeat;
312  background-position: 0 0;
313  filter: brightness(1.35);
314  background-image: conic-gradient(
315    rgba(0, 0, 0, 0),
316    #3d3a4f,
317    rgba(0, 0, 0, 0) 50%,
318    rgba(0, 0, 0, 0) 50%,
319    #3d3a4f,
320    rgba(0, 0, 0, 0) 100%
321  );
322  animation: rotate 4s linear infinite;
323}
324#main {
325  position: relative;
326}
327#search-icon {
328  position: absolute;
329  left: 20px;
330  top: 15px;
331}