Can we color a paragraph text(50%-50%) with 2 different colors only with CSS, without using any inline tags or any other scripting language?

Question

Need to color a paragraph with 2 different colors in the ratio of 1:1 or 50%-50% text of the paragraph. We can not use any other tags,inline css or any other scripting or programming language. which syntax of CSS should I use.

I have tried pseudo classes like ::first-letter and ::first-line but we need to color the text in the 50%-50% ratio.

Dupe? https://stackoverflow.com/questions/37831837/gradient-text-color — mplungjan, Sep 19 '19 at 16:46

mplungjan · Answer 1 · 2019-09-20T08:38:30.253

2

I hacked this one

Changing text color on 2 sides of diagonal gradient line in html

div {
  width: 290px;
  font-size: 20px;
  background: -webkit-linear-gradient(190deg, red 50%, orange 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div>This text needs to fill 100% to work</div>

edited Sep 20 '19 at 08:38

answered Sep 19 '19 at 16:53

mplungjan

169,008
28
173
236

Great sir this is excellent, but what if we need 50% of the text of the paragraph in one color while rest 50% text to be in another. – kushmeet Sep 20 '19 at 08:28
It was what I could find. You can change the black too – mplungjan Sep 20 '19 at 08:38

Can we color a paragraph text(50%-50%) with 2 different colors only with CSS, without using any inline tags or any other scripting language?

1 Answers1