Gradient text color, using Material-UI <Typography />

Question

How do I style a <Typography /> component so that its font-color becomes a gradient?

So far what I've tried:

const CustomColor = withStyles({
  root: {
    fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  },
})(Typography);

This did not work, so I tried to follow this tutorial, and did this implementation:

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

This also did not work as expected, but at least some sort of gradient showed up.

Another thing I've tried is:

<Typography style={{
    fontSize: 20,
    background: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    webkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  }}> Hello world! </Typography>

This kinda worked, but depending on the width of the element the gradient changes. This is an unwanted behavior. Also I would like to stik to a withStyles style solution.

Online demo: here

Any tipps? What have I missed?

Pneumatology

The immediate thing to note is that a gradient is a ‘special kind of’ image, not a color, in CSS. See for example [link] developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() Could you put up a working snippetj so we can see the problem and also describe further what ‘this did not work as expected’ means. – Soledadsolely

An image? or you mean the whole code? – Aminopyrine

Code that we can run which shows your problem. Use the SO snippet system. – Soledadsolely

I'm trying to insert a working template, but I have to admit, I have not a single clue how can I upload my react and material-ui project to SO. – Aminopyrine

@BudaÖrs Try setting up a CodeSandbox or another similar code sharing/collaboration system and share it here. – Pilch

Thank you for the awsome suggestion! – Aminopyrine

Answer 1

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:

Nefarious

Answer 2

After some time playing around, I come up with this solution...

  <Typography
  variant="h1"
  align="left"
  color="grey.700"
  sx={{
    backgroundcolor: "primary",
    backgroundImage: `linear-gradient(45deg, #5514B4, #FF80FF)`,
    backgroundSize: "100%",
    backgroundRepeat: "repeat",
    backgroundClip: "text",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent"
  }}
>
  GRADIENT TEXT
</Typography>   

Codesandbox Example

Alage

Answer 3

I was having trouble getting this to work with MUI but i got it working with this approach. The key was using backgroundImage instead of background

WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundImage: '-webkit-linear-gradient(rgba(222, 53, 76, 0.8), rgba(226, 123, 27, 0.8))',

Manifesto