CODEWITHSUNDEEP
htmlcsscolorsgradient
acroscene
acroscene

Reputation: 1067

pick color from css gradient for coloring text

I have a colorgradient created in css. At the moment the text is black but I want to color the scale according to the matching color in the gradient.

enter image description here

Of course I can type it in manually but how can I do this in a more automatic way.

 .container {
  display: flex;
  justify-content: space-between;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 60px;
  font-weight: bold;
}
#grad1 {
  height: 55px;
  background-image: linear-gradient(to left, #d91918, #f8542f, #ee77aa, #ffcd46);
}
<head>
<style>

</style>
</head>
<body>

<div id="grad1">
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>

</body>

Upvotes: 0

Views: 85

Answers (1)

Praneet Dixit
Praneet Dixit

Reputation: 1425

So with some modifications to your code, I have achieved the desired effect-

  1. Separated the #grad1 and .container. (You can wrap then in a div for convenience)
  2. Give the same background to .container.
  3. Use two properties -webkit-background-clip and -webkit-text-fill-color: transparent; to do the magic.

The -webkit-background-clip holds the background only to the text. But we can't see it because the text is not transparent. To override the default color property and make the text transparent, we use -webkit-text-fill-color: transparent.

.container {
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  font-weight: bold;
  background: linear-gradient(to left, #d91918, #f8542f, #ee77aa, #ffcd46);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 5px;
}

#grad1 {
  height: 55px;
  background-image: linear-gradient(to left, #d91918, #f8542f, #ee77aa, #ffcd46);
}
<div id="grad1"></div>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Note - This trick works only in webkit browsers and things might break on non-webkit browsers. To prevent this, provide a fallback color property to the text.

Upvotes: 1

Related Questions