0

I have added the white color linear gradient with less opacity for the border but it is showing the black border.

.input-field {
  width: 300px;
  height: 50px;
  padding: 18px 28px;
  border-radius: 18px;
  background: linear-gradient(126.6deg, rgba(255, 255, 255, 0.12) 28.69%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(140px);
  border-radius: 20px;
  border: 2px solid;
  border-image-source: linear-gradient(123.98deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 127.65%),linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);
}
<input type="email" class="input-field" placeholder="Name">
Shawn
  • 10,931
  • 18
  • 81
  • 126
Rohit Sutar
  • 116
  • 1
  • 3
  • Can you help me understand what are you expecting this to look like? Thanks. – Ryan O'D Mar 19 '22 at 22:11
  • Use your browser's dev tools inspect facility. You will see that the border-image value is invalid CSS so it isn't being applied at all. – A Haworth Mar 20 '22 at 10:27

0 Answers0