I'm encountering a challenge with implementing a text-shadow effect. I'm trying to achieve to get like below image:
Problem:
- When I set the text color to white, the text-shadow effect is not visually appealing. The shadow effect doesn't stand out against the white, resulting in a lack of contrast and impact.
- On the other hand, when I set the text color to transparent to allow the shadow effect to show through, the text becomes blurry and difficult to read. While the shadow effect is more noticeable, readability is compromised.
Attempts to Solve:
- I've experimented with adjusting the colors and transparency of both the text and the shadows, but haven't found a combination that works well in all scenarios.
- I've also tried tweaking the blur radius and offsets of the text-shadow to create a softer effect, but this hasn't significantly improved readability.
Code Sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap">
<style>
.wrapper-1 {
margin-bottom: 24px;
}
.wrapper-1,
.wrapper-2 {
background-image: url('https://i.ibb.co/MVrdmQR/banner-1.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
max-width: 440px;
border-radius: 4px;
height: 440px;
display: flex;
align-items: center;
justify-content: center;
}
.title-1,
.title-2 {
text-shadow: 0px 4px 20px rgba(0, 13, 126, 0.6), 0px 4px 10px rgba(41, 228, 217, 0.5),
0px 4px 5px rgba(14, 118, 125, 0.5);
font-size: 150px;
font-weight: 400;
font-family: 'Archivo Black', sans-serif;
min-height: 136px;
}
.title-1 {
color: #fff;
}
.title-2 {
color: transparent;
}
</style>
</head>
<body>
<div class="wrapper-1">
<p class="title-1">33</p>
</div>
<div class="wrapper-2">
<p class="title-2">33</p>
</div>
</body>
</html>I have been trying to achieve this for 2 days but still haven't succeeded. Any advice or suggestions would be highly appreciated. Thank you in advance for your help!