1 
 2<div class="grid"></div>
 3<div id="poda">
 4  <div class="glow"></div>
 5  <div class="darkBorderBg"></div>
 6  <div class="darkBorderBg"></div>
 7  <div class="darkBorderBg"></div>
 8 
 9  <div class="white"></div>
10 
11  <div class="border"></div>
12 
13  <div id="main">
14    <input placeholder="Search..." type="text" name="text" class="input" />
15    <div id="input-mask"></div>
16    <div id="pink-mask"></div>
17    <div class="filterBorder"></div>
18    <div id="filter-icon">
19      <svg
20        preserveAspectRatio="none"
21        height="27"
22        width="27"
23        viewBox="4.8 4.56 14.832 15.408"
24        fill="none"
25      >
26        <path
27          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"
28          stroke="#d6d6e6"
29          stroke-width="1"
30          stroke-miterlimit="10"
31          stroke-linecap="round"
32          stroke-linejoin="round"
33        ></path>
34      </svg>
35    </div>
36    <div id="search-icon">
37      <svg
38        xmlns="http://www.w3.org/2000/svg"
39        width="24"
40        viewBox="0 0 24 24"
41        stroke-width="2"
42        stroke-linejoin="round"
43        stroke-linecap="round"
44        height="24"
45        fill="none"
46        class="feather feather-search"
47      >
48        <circle stroke="url(#search)" r="8" cy="11" cx="11"></circle>
49        <line
50          stroke="url(#searchl)"
51          y2="16.65"
52          y1="22"
53          x2="16.65"
54          x1="22"
55        ></line>
56        <defs>
57          <linearGradient gradientTransform="rotate(50)" id="search">
58            <stop stop-color="#f8e7f8" offset="0%"></stop>
59            <stop stop-color="#b6a9b7" offset="50%"></stop>
60          </linearGradient>
61          <linearGradient id="searchl">
62            <stop stop-color="#b6a9b7" offset="0%"></stop>
63            <stop stop-color="#837484" offset="50%"></stop>
64          </linearGradient>
65        </defs>
66      </svg>
67    </div>
68  </div>
69</div>          

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