How to change foreground color inside div to be two different colours?

Question

Here is what my output currently looks like. I have a two divs for the background colour (black and white), and another div on top that holds my text. I want half of the text to be white and half of it to be black so that it can be seen on each half. I have tried making two inner paragraphs in the div to hold my text, and then modifying those, but that way seems inefficient and requires more work. I was wondering whether or not there is a linear gradient like feature for the foreground colour instead of background. If not, what do you suggest me doing?

Can you please share your code? – Srusti Thakkar May 30 '22 at 07:04 — Srusti Thakkar, May 30 '22 at 07:04

score 2 · Answer 1 · answered May 30 '22 at 07:13

You can use linear-gradient here:

body {
    background-color: white;
}

#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 50%;
    background-color: black;
    z-index: 1;
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

p{
     display: inline-block;
     margin: 0;
     background: linear-gradient(to right, #fff 50%, #000 50%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

<div id="content">
    <p>This is some content.</p>
</div>
<div id="background"></div>

Mubeen Ahmad · Answer 2 · 2022-05-30T08:13:54.730

You can use these css properties:

background: linear-gradient(to right, #fff 50%, #000 50%);
background-clip: text;
-webkit-background-clip: text; /* Safari and Chrome */
   -moz-background-clip: text; /* Firefox */
    -ms-background-clip: text; /* IE 9 */
     -o-background-clip: text; /* Opera */
-webkit-text-fill-color: transparent;

#content {
    padding: 30px;
    text-align: center;
    background: linear-gradient(to right, #000 50%, #fff 50%);
}

p{
    font-weight: bold;
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #fff 50%, #000 50%);
    background-clip: text;
    -webkit-background-clip: text; /* Safari and Chrome */
       -moz-background-clip: text; /* Firefox */
        -ms-background-clip: text; /* IE 9 */
         -o-background-clip: text; /* Opera */
    -webkit-text-fill-color: transparent;
}

<div id="content">
    <p>This is some content.</p>
</div>

How to change foreground color inside div to be two different colours?

2 Answers2