I’m wanting to recreate the image below.. (the screenshot is from Figma) I’ve been advised to use box shadows, borders offset etc..Any help would be massively appreciated 🙂
I’ve got the following code so far:
.heading-decor {
color: #192A51;
background: #DCE8F8;
border: 1px solid black;
border-radius: 70px;
box-shadow: 3px 3px 0px 2px red;
padding: 10px;
font-size: 26px;
font-weight: 600;
width: fit-content;
}<div class="heading-decor">Text goes in hereee</div>
>Solution :
Use a pseudo element for the border
.heading-decor {
color: #192A51;
background: #DCE8F8;
border-radius: 80px;
padding: 10px 20px;
font-size: 40px;
font-weight: 600;
width: fit-content;
margin: 20px;
position: relative;
}
.heading-decor:before {
content:"";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
border: 1px solid #000;
translate: 5px -5px; /* adjust this */
} <div class="heading-decor">Text goes in hereee</div>