How to Set Horizontal Gradient to Text via CSS? (Left Letter One Colour, Right - Another Colour)

Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)

Yes, it is.

h1 {

  font-size: 72px;

   background: -webkit-linear-gradient(left, red , yellow);

   background: -o-linear-gradient(right, red, yellow);

   background: -moz-linear-gradient(right, red, yellow);

   background: linear-gradient(to right, red , yellow); 

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

<h1>Hello World</h1>

css text gradient

You can do it using CSS but it will only work in webkit browsers (Chrome and Safari):

p {
    background: linear-gradient(red, blue);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

Can I have a horizontal multiple colour gradient on text using CSS3 / HTML 5?

Here is sample SVG code - tested with FF4, Safari 5, and Chrome. Note that you have to serve this as an XHTML page for Safari to render it. This should also work with IE9 but I haven't tested it.

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1">

  <defs
     id="FooDefs">
    <linearGradient
       id="MyFirstGradient"
       x1="400"
       y1="350"
       x2="400"
       y2="420"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop1"
         style="stop-color:#1acf86;"
         offset="0" />
      <stop
         id="stop2"
         style="stop-color:#ff0051;"
         offset="0.25" />
      <stop
         id="stop3"
         style="stop-color:#1da1c9;"
         offset="0.625" />
      <stop
         id="stop4"
         style="stop-color:#e45f25;"
         offset="1" />
    </linearGradient>
  </defs>
    <text
         x="150"
         y="420"
         id="textBAR"
         style="font-size:72px;fill:url(#MyFirstGradient);">
BIG TEXT TEST
</text>
</svg>

Gradient text color

I don't exactly know how the stop stuff works.
But I've got a gradient text example. Maybe this will help you out!

_you can also add more colors to the gradient if you want or just select other colors from the color generator

.rainbow2 {
  background-image: linear-gradient(to right, #E0F8F7, #585858, #fff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

How to create a gradient with 3 colors in CSS without color escalation

Sure, just add color stops at every (100/numColors)%

div {

  background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);

  width: 100%;

  height:64px;

}

<div></div>

Right to left gradient in iE with css - possible?

Sure. Just do:

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFFFF, endColorStr=#D5D4D4, GradientType=1);

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#D5D4D4, GradientType=1)";

---

Serious answer: the gradient filter support two gradients types: 0 (vertical) and 1 (horizontal).

If you want to switch from right->lef to left->right , you need to switch the start and end color hex.

Only colour half a div with CSS gradients

try something like this:

background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);

Here a link to a code sample on CodePen

You can go crazy with gradients on this nice website

EDIT

If you want to color exactly half of the div, w/o the shade/gradient, use this code:

background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);

if you want a diagonal from bottom left to top right, use this code:

background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);

Check the linked Codepen sample for the updated code sample.

---

Related Topics