fabiofcferreira

$grad: linear-gradient(135deg, #2D41F9, #DE85FD);

// background-clip sets the maximum bounderies for each background. Thus, we use the first background
// to clip it to the text (so it gets the gradient color) then clip the white background (content of the input, e.g.)
// and last but most important we clip the third background to the border-box leaving the border colored using the gradient

// NOTE: It is mandatory to have a transparent border defined otherwise there will be no border-box :)

input {
  position: relative;