HTML Input Gradient Text

Question

Been looking for a solution but no prevail, so I thought I'd ask here.

I am trying to apply a linear gradient to the input field as I have for the buttons as seen in this picture.

I have played around with different CSS options but have not been able to succeed.

The best version is where the placeholder is styled, but the input value is not. If I try to style the input value then things go wrong.

And advice would be greatly appreciated.

button{
  background-color: dodgerblue;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  font-size: 32px
}

button i{
  background: -webkit-linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

input{
  background-color: dodgerblue;
  height: 60px;
  width: 360px;
  font-size: 32px
}

input::placeholder{
  background: -webkit-linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
input:focus {
    background: -webkit-linear-gradient(#ffffff70, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
*/

<button><i>X</i></button>

<hr />

<input placeholder="SEARCH"/>

Answer 1

if your trying to set a gradient on the placeholder text, your best option is to omit or remove the placeholder completely and set another div over the top of the input with your chosen font, and the text gradient.

<div id="InpCont">
   <input type="text" id="UsrInp">
   <div id="InpOverlay">
      <p id="PsudoPlcHlder" class="OverlayTxt" contenteditable="true" onchange="PsudoPlcHlder.value=UsrInp.value" max-length="44">Search</p>
   </div>
</div>

#InpCont{
   // Position Where you want this element
   }
#UsrInp{
   position:absolute;
   top:8px; left:50%;
   transform:translateX(-50%);
   width:64%; height:calc(28px + 1.87vh);
   background:linear-gradient(-33deg,#ffffff70, #ffffff);
   z-index:20;
   }
#PsudoPlcHlder{
    position:relative;
    top:-40px; left:calc(20px + 25%);
    width:240px; height:29px; padding:2px;
    background:linear-gradient(23deg,red,green,blue);
    overflow-x:hidden;
    background-clip:text;
    color:transparent;
    z-index:25;
    }

(document.addEventListener('DOMContentLoaded', function(){
    const UsrInp = document.getElementById('UsrInp');
    const PsudoPlcHlder = document.getElementById('PsudoPlcHlder');

    PsudoPlcHlder.addEventListener('click', (function(){
         PsudoPlcHlder.innerText = '';
    })) 
})

Just tried this on my own app and it seems to be working, but i'm not sure about the form submission part as I haven't got it hooked up to a db at the moment, might have to play around with the positioning a bit as I only tested this at the very bottom of my app, but might be a good starting point for you to mess around with.

in testing this, the gradient seems to stretch to fit, however many characters there are even if there like 120, which is a bit weird. will play around with this more and edit later on if I find any better methods..

Answer 2

You will need two background layer. One for the text and one for the background-color.

Unfortunately this won't work on Firefox due to known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244

input {
  background-color: dodgerblue;
  color:transparent;
  height: 60px;
  width: 360px;
  font-size: 32px
}

input::placeholder {
  background: linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

input:not(:placeholder-shown) {
  background: 
    linear-gradient(#ffffff70, #ffffff), 
    dodgerblue;
  -webkit-background-clip: text, padding-box;
          background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
}

<input placeholder="SEARCH">

For firefox you can consider an extra div for the background:

input {
  color:transparent;
  height: 60px;
  width: 360px;
  font-size: 32px;
  background: linear-gradient(#ffffff70, #ffffff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.input {
  display:inline-block;
  background-color: dodgerblue;
}

<div class="input"><input placeholder="SEARCH"></div>