1

If I have : <p>A</p>

Is there any way in html or css or Javascript which I am able to paint half of "A" white and the other black or any other color.

Thanks

Improve this question
9
  • 3
    w3schools.com/css/css3_gradients.asp Commented Nov 8, 2017 at 16:49
  • Need some sample design Commented Nov 8, 2017 at 16:50
  • 1
    @Robbie That is for background not color which is what is used for font color. Commented Nov 8, 2017 at 16:51
  • 2
    @RobbieMilejczak How is a background gradient relevant to the OPs issue? Also, please don't use W3Schools as a reference. Their articles are often outdated and sometimes just plain wrong. MDN is far more comprehensive and accurate: developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient Commented Nov 8, 2017 at 16:51
  • @j08691 yea, I was totally baffled as to how that got upvotes Commented Nov 8, 2017 at 16:54

1 Answer 1

Reset to default
2

You can try it with gradients as Robbie suggested. There is only one down side of this. You won't be able to use text-shadow property (except with another hack - make duplicate of text and give it the shadow property)

Edited on request... 

p { font-size: 12px; background: -webkit-linear-gradient(#000, #DDD); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Source code can be found here https://css-tricks.com/snippets/css/gradient-text/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.