I currently have a div with a gradient as a background image.
However, the problem I get is that the transparent border has some weird issue which is caused by the fact that the background image doesn’t cover the area that the border does.
image of what is happening
This is currently what I have:
<div className="flex items-center justify-center gap-2 bg-grad rounded-full px-3 py-20 border-[3px] border-white/30">
<p className="text-xl font-semibold text-white">Our Mission</p>
<Image src="/rocket_launch.svg" alt="" width={10} height={10}/>
</div>
with .bg-grad defined as:
.bg-grad {
background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
}
New contributor
Th3Wyv3rn is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You could use a background-size larger than 100% (horizontally) and a horizontal background-position of -3px like in this example (some settings are guessed, but the principle should be clear from the example):
.bg-grad {
background-image: linear-gradient(90deg, #FFB74A 0%, #FF4AA1 45%, #6F2BFF 100%);
background-position: -3px 0;
background-size: 105% 100%;
}
.other_stuff {
display: inline-block;
border: 3px solid transparent;
padding: 12px;
border-radius: 20px;
}<div class="bg-grad other_stuff">This is the text</div>