1 
2<div class="box-input">
3  <div class="border">
4    <input type="text" name="text" class="input" placeholder="Name">
5  </div>
6</div>          

 1 
 2.box-input {
 3  position: relative;
 4}
 5 
 6.border {
 7  background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
 8  box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.5),
 9    25px -10px 30px -5px rgba(255, 0, 212, 0.5),
10    25px 10px 30px -5px rgba(255, 174, 0, 0.5),
11    -25px 10px 30px -5px rgba(255, 230, 0, 0.5);
12  padding: 4px;
13}
14 
15.input {
16  background-color: #212121;
17  max-width: 250px;
18  height: 40px;
19  padding: 0 19px 0 10px;
20  font-size: 1.1em;
21  position: relative;
22  border: none;
23  color: white;
24  outline: 0;
25  overflow: hidden;
26}
27 
28.box-input::after,
29.box-input::before {
30  content: "";
31  width: 130px;
32  height: 30px;
33  position: absolute;
34  z-index: -1;
35}
36 
37.box-input::after {
38  bottom: 0;
39  right: 0;
40}
41 
42.box-input::before {
43  top: 0;
44  left: 0;
45}
46 
47.input::placeholder {
48  transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s;
49}
50 
51.input:focus::placeholder {
52  padding-left: 165px;
53  transform: translateY(-50px);
54}