How to Have a Horizontal Multiple Colour Gradient on Text Using CSS3/HTML 5

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

Sample Image

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>

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>

how to draw dashed and solid vertical lines with css gradient

You can do it like below:

.box {
  --c: #000; /* color */
  --t: 2px; /* thickness */
  --g: 40px; /* gap */
  --d: 10px; /* control the dashes */
 
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) 0/ calc(4*var(--g)) 100%,
    repeating-linear-gradient(90deg,#0000 0 var(--t),#fff 0 var(--g)),
    linear-gradient(var(--c) 50%,#0000 0) 0/100% var(--d);

  background-clip: padding-box;
  min-height: 100vh;
  border: solid #0000;
  border-width: 0 var(--g);
}

body {
  margin:0;
}

<div class="box"></div>

How to have vertical gradient lines become horizontal?

Try this.

body {
  background-image: linear-gradient(to bottom, red 1px, white 1px);
  background-size: 72px 72px;
}

How to get two horizontal background colors in one div using linear gradient?

Try this https://jsfiddle.net/2Lzo9vfc/303/

 div {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(35%, rgba(255,255,255,1)), color-stop(35%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
}

Color gradient for each line/character

Here is the solution of the effect you want:

HTML

<p class="text-gradient">
TaihouKai
</p>

CSS

.text-gradient {
    font-size: 20px;
    font-weight: 700;
    background-image: linear-gradient(to bottom, #9E9F9E, #ffffff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

Explanation of background-clip CSS property (from MDN):

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

This property allows the background gradient, image or colour to be "cast" onto the characters themselves.

JS Fiddle Demo

UPDATE If you want to deal with multiple lines which are separated with line break <br />, you can use JavaScript to achieve:

revised JSFiddle demo

How can I split a text in 2 color vertically?

You can certainly use CSS3 gradient and clip properties .. I am aware of webkits which I used for, but not sure about other browsers, if you want you can try this

Demo (Please view it on chrome)

div {
  font: 40px Arial;
  background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Note: As a web developer am not using any latest browsers, if you know
any proprietary property which works the same please feel free to edit
my answer

CSS horizontal alternate stripes with gradient on text

It can be done like follow:

body {  background:#000;  font-family:arial;}
p{  font-size: 50px;  display:inline-block;  margin:20px;  font-weight:bold;  background:     linear-gradient(to right,transparent, var(--c,red)),    repeating-linear-gradient(to bottom, var(--c,red) 0,var(--c,red) 2px,transparent 2px,transparent 4px);  background-clip: text;  color: transparent;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

<p>  example</p><p style="--c:blue">  example</p>