Text blended over background color

by

You can create another gradient to color the text without the use of mix-blend mode:

.container {
  width: 200px;
  height: 20px;
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
<div class="container">
  <div class="text">Some text here</div>
</div>

And for better flexibility you can use CSS variable to control the progress:

.container {
  width: 200px;
  height: 20px;
  margin:5px;
  background: linear-gradient(to right, #43a047 var(--p,50%), #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white var(--p,50%), black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
<div class="container" style="--p:80%">
  <div class="text">Some text here</div>
</div>

<div class="container" style="--p:20%">
  <div class="text">Some text here</div>
</div>
<div class="container">
  <div class="text">Some text here</div>
</div>

More Related Contents:

  1. What is the difference between display: inline and display: inline-block?
  2. How do you easily horizontally center a using CSS? [duplicate]
  3. CSS selector based on element text? [duplicate]
  4. CSS @font-face not working with Firefox, but working with Chrome and IE
  5. Opacity of background-color, but not the text [duplicate]
  6. Footer at bottom of page or content, whichever is lower
  7. Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
  8. CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
  9. IE 8: background-size fix [duplicate]
  10. How to write a CSS hack for IE 11? [duplicate]
  11. Get Two Columns with different background colours that extend to screen edge [duplicate]
  12. Is there a way to use SVG as content in a pseudo element ::before or ::after
  13. Can I remove the URL from my print css, so the web address doesn’t print?
  14. CSS to make an empty cell’s border appear?
  15. Style child element when hover on parent
  16. How to align left last row/line in multiple line flexbox [duplicate]
  17. CSS @font-face – what does “src: local(‘☺’)” mean?
  18. How to hide scrollbar in Firefox?
  19. How to auto adjust the height according to content in it?
  20. What is the difference between block and inline-block with width: 100%?
  21. Icon fonts not loading in IE11
  22. Center Oversized Image in Div
  23. Print Background colours in Chrome
  24. Font weight turns lighter on Mac/Safari
  25. CSS Equivalent of the “if” statement
  26. CSS3 3D Transform doesn’t work on IE11
  27. IE not rendering CSS properly when the site is located at networkdrive
  28. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  29. CSS transition fade in
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment