Search code examples
htmlcssiconsgradientlinear-gradients

How to add gradient color to google icons along with a gradient background?

I have a circular gradient background for the icon. Also would lik to make the icon color as gradient instead of "#fff". How can I achieve this ?

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons cloud-icon">cloud</i>

</body>
</html>


.cloud-icon{
    background: linear-gradient(#fff, blue);
    border-radius: 50%;
    padding: 60px;
    height: 35px;
    width: 35px;
    font-size:40px;
    color:#fff;
}
Solution 

  • span{
  background: linear-gradient(#fff, blue);
  border-radius: 50%;
  padding: 60px;
  height: 35px;
  width: 35px;
  font-size:40px;
  color:#fff;
    float: left;
}
span i{  background: linear-gradient(#32f8ff, #e9e9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<span><i class="material-icons cloud-icon">cloud</i></span>

</body>
</html>