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>
4 Replies
I think you need mixed blend mode for this effect
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...@glutonium got it.... thanks... mix blend mode helps that..
I think it will ya
U r welcomed