I am struggling to find a way to make text easily readable over my gradient background. Despite trying to use MUI's Typography or a simple <p>, the contrast isn't great as the text appears in black.
After some research, I discovered that I could potentially improve the contrast by utilizing mix-blend-mode, so I decided to give it a shot.
This is how I structured my div:
const useStyles = makeStyles((theme: Theme) => {
const fontSize = 15;
return createStyles({
avatarText: {
mixBlendMode: "difference",
},
});
});
<div className="profile-basic-info">
<Avatar src={avatar} className="avatar" />
<Typography variant="h3" className={classes.avatarText}>
{firstName} {lastName}
</Typography>
<Typography variant="h6" className={classes.avatarText}>
{email}
</Typography>
</div>
Here is the CSS (SCSS) for this div:
.profile-basic-info {
display: flex;
flex-direction: column;
min-width: 500px;
border-radius: 50px 0px 0px 50px;
padding: $padding;
align-items: center;
justify-content: center;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
.avatar {
margin-bottom: 30px;
width: 360px !important;
height: 360px !important;
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
}
}
To style the Typography, I utilize classes.avatarText (this is a specific feature of MUI).
The issue arises when the mix-blend-mode is added, resulting in the text disappearing entirely:
https://i.stack.imgur.com/gq2pe.png
If I comment out the background: [...] property in my CSS, the text becomes visible once again:
https://i.stack.imgur.com/TgBPV.png
Could there be an error in my approach somewhere?
P.S This isn't an isolated MUI problem - I have tested with regular <p> elements and applying mix-blend-mode directly in the CSS file, yet the text remains hidden under the gradient.