Search code examples
csscolorswebkitlinear-gradients

Is it possible to create a CSS linear gradient for text with specific transition width?

I have a client who is requesting for her navbar logo that the text have a CSS gradient with a very short transition from the first color to the second, just like this image that she found online:

enter image description here

The only way I know to create a text transition in CSS is with something like the following code, which creates a very gradual transition.

nav.navbar span {
  background: -webkit-linear-gradient(#f9f876, #82f7d6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Resulting text: enter image description here

Is it possible to achieve an effect like she is requesting in CSS for text? Or is this something she'll just have to ask for from a designer?

Solution

  • Yes you can, by assigning the starting point and ending point(40% and 60% for example):

    background: linear-gradient(#f9f876 40%, #82f7d6 60%);


    body {
  background-color: magenta;
}

h1 {
  background: linear-gradient(#f9f876 40%, #82f7d6 60%);
  background: -webkit-linear-gradient(#f9f876 40%, #82f7d6 60%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
    <h1>DOLCE'S DOLLHOUSE</h1>