Better options than mixed blend mode? - html

Question

I have a home page that has two background colours. What I would like for the navbar li's is that when the screen resizes, and the nav bar text enters the part of the screen where the background is blue, I'd like it to change to grey (the same colour as the other part of the screen)...
Now, I know mixed-blend-mode is a thing, but I don't like how it inverts the colour... Is there a way to specify the colour of mixed-blend-mode? Or are there any other alternatives?
html, body {
margin: 0;
padding: 0;
/*background-color: #eeeeee;*/
}
div {
display: block;
}
ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
#desktop-navbar {
text-transform: uppercase;
background-color: transparent;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-logo{
float: left;
}
.logo {
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
margin-left: 1%;
font-family: Thasadith;
font-weight: 700;
letter-spacing: 3px;
width: auto;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
display: flex;
height: inherit;
}
#home-content {
height: auto;
width: 100%;
background: linear-gradient(90deg, #314455 63%, #dddddd 0%);
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 35px;
color: #000000;
font-family: Thasadith;
font-weight: 900;
}
<div id="desktop-navbar"">
<div id="desktop-nav-wrapper">
<h3 id = "desktop-logo" class="logo"><i class="fas fa-highlighter"></i></h3>
<nav>
<ul id = "desktop-nav-content">
<li>Casa</li>
<li>Sobre Mi</li>
<li>Servicio</li>
<li>Galería</li>
<li>Contacto</li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-content">
</div>
</div>
</div>

Answer 1

Since you gradient is covering the whole page width, you can then color your text with the opposite gradient and you make it fixed to simulate the changing color effect:
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
#desktop-navbar {
text-transform: uppercase;
background-color: transparent;
width: 100%;
height: 90px;
position: fixed;
z-index: 1;
}
#desktop-logo {
float: left;
}
.logo {
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
margin-left: 1%;
font-family: Thasadith;
font-weight: 700;
letter-spacing: 3px;
width: auto;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
display: flex;
height: inherit;
}
#home-content {
height: auto;
width: 100%;
background: linear-gradient(90deg, #314455 63%, #dddddd 0%);
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 35px;
color: #000000;
font-family: Thasadith;
font-weight: 900;
/*relevant code*/
background: linear-gradient(90deg, #dddddd 63%, #000 0%) fixed;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/**/
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<h3 id="desktop-logo" class="logo"><i class="fas fa-highlighter"></i></h3>
<nav>
<ul id="desktop-nav-content">
<li>Casa</li>
<li>Sobre Mi</li>
<li>Servicio</li>
<li>Galería</li>
<li>Contacto</li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-content">
</div>
</div>
</div>