How to make text color adapt to progressbar

I am making a custom progress bar. In the center of bar, text is center. As the progress fill, text color should be black on filled side and white on unfilled side. is that possible? i have attached the figma image and my output image. I dont know how to make that text color change based on background. Can anyone help me Codesandbox Link: https://codesandbox.io/p/sandbox/react-new?utm_source=dotnew Code: <Box sx={{ position: "relative", height: "31px", width: "100%", borderRadius: "20px", outline: "2px solid white", background: "#1E1D3E", display: "flex", alignItems: "center", justifyContent: "center", }} > {/* Progress Bar */} <Box sx={{ position: "absolute", height: "31px", width: "50%", borderRadius: "20px", background: "linear-gradient(90deg, #FFB818 0%, #FFCA51 100%)", top: 0, left: 0, }} /> <Typography sx={{ position: "relative", color: "white", fontWeight: "bold" }} > 1/2 attempt remaining </Typography> </Box>
No description
No description
4 Replies
glutonium
glutonium5w ago
I think you need mixed blend mode for this effect
glutonium
glutonium5w ago
Kevin Powell
YouTube
Dynamic color change while scrolling with CSS
With the help of mix-blend-mode, the effect where a fixed or sticky element switches colors based on the background it’s over is really easy to do! There are a few important things to take into account with it, but it’s nothing difficult to deal with! 🔗 Links ✅ More on position sticky: https://youtu.be/8TyoihVGErI ✅ More quick CSS tips and tr...
smackalpha
smackalphaOP5w ago
@glutonium got it.... thanks... mix blend mode helps that..
glutonium
glutonium5w ago
I think it will ya U r welcomed
Want results from more Discord servers?
Add your server