Gradient Text Color

Gradient text color, using Material-UI Typography /

replace the webkitBackgroundClip with WebkitBackgroundClip. JSS takes the capital letters for webkit.

const CustomColor = withStyles({
  root: {
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent"
  }
})(Typography);

Here is the working demo:

Edit sad-star-v8u37

Css, Gradient color text and text border

Assuming this is the kind of effect you are looking for:

Sample Image

this snippet adds a text-stroke to your CSS.

.card .blur h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(cyan, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px navy;
  text-stroke: 4px navy;
  font-weight: 900;
  font-size: 76px;
}

<div class="card">
  <div class="blur">
    <h3>HEADING</h3>
  </div>
</div>

How to set gradient as text color as well as add stroke around it in TextView Android?

So after waiting for more than 4 days and lots of research, I am finally able to succeed to achieve the desired output.

The mistake I was making is while drawing a stroke on a paint object, I am setting the stroke color as textcolor. What I did this time was I created a LinearGradient() object and gave it to paint.shader while setting the paintStyle(Paint.Style.Stroke).

Paint paint = this.getPaint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5f);
        paint.setShader(new LinearGradient(0f, 0f, getTextSize(), getTextSize(), mOutlineColor, mOutlineColor, Shader.TileMode.CLAMP));

And after setting the stroke in onDraw() method of my CustomTextView class, I called the super.onDraw(canvas)

Then I create a new LinearGradient() object for the gradient colors as follow:

 Paint paint = this.getPaint();
        paint.setStyle(Paint.Style.FILL);
        Shader linearShader = new LinearGradient(0f, 0f, getWidth(), getTextSize(), colors, null,
                Shader.TileMode.CLAMP);
        paint.setShader(linearShader);

Finally calling the super.onDraw(canvas) again and this gives my textview a stroke as well as gradient as textColor.

Gradient text color in a custom view

You should define your colorStart and colorEnd as instance variables of your GradientTextView class.
Then, define a public method within the class to set the colorStart and the colorEnd programmatically:

public class GradientTextView extends android.support.v7.widget.AppCompatTextView {

    private int colorStart = ContextCompat.getColor(getContext(), R.color.colorPrimary);
    private int colorEnd = ContextCompat.getColor(getContext(), R.color.colorAccent);


    public GradientTextView(Context context) {
        super(context);
    }

    public GradientTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public GradientTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //Setting the gradient if layout is changed
        if (changed) {
            getPaint().setShader(new LinearGradient(0, 0, getWidth(), getHeight(), colorStart, colorEnd,
                    Shader.TileMode.CLAMP));
        }
    }

    public void setGradientColors(int colorStart, int colorEnd) {
        this.colorStart = colorStart;
        this.colorEnd = colorEnd;
        // this forces view redrawing
        invalidate();
    }

}

How to animate text gradient color change in Tailwind?

There is a simple way to achieve what you want, here is how :

1- First go to tailwind.config.js and add this inside extend

 extend: {
      'animation': {
            'text':'text 5s ease infinite',
        },
        'keyframes': {
            'text': {
                '0%, 100%': {
                   'background-size':'200% 200%',
                    'background-position': 'left center'
                },
                '50%': {
                   'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            },
        }
    },

2- Then add these classes to your div :

<div class="text-9xl font-semibold 
            bg-gradient-to-r bg-clip-text  text-transparent 
            from-indigo-500 via-purple-500 to-indigo-500
            animate-text
            ">
      SampleText
</div>

Take a look HERE

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