gradient

How can I create this exact border gradient
22 Replies
13eck
13eck2y ago
Inspect the element and copy the code
Aldrin
Aldrin2y ago
its in figma 😅
13eck
13eck2y ago
Does Figma not have an "export to CSS" option? I thought that was one of the main reasons it was used by FE devs
Aldrin
Aldrin2y ago
for this there is no proper CSS on figma
Aldrin
Aldrin2y ago
this is what it shows
13eck
13eck2y ago
That's of limited help. Way to go, Figma! lol Can you at least get the two colours used?
Aldrin
Aldrin2y ago
13eck
13eck2y ago
This should be a good starting point:
.gradient-border-class {
border-image: linear-gradient(45deg, var(--first-clr), var(--sec-clr));
}
.gradient-border-class {
border-image: linear-gradient(45deg, var(--first-clr), var(--sec-clr));
}
Aldrin
Aldrin2y ago
ohk, let me try
Mannix
Mannix2y ago
there is a border-image property where you can use a gradient
13eck
13eck2y ago
Yes, border-image. That's what I meant >_< To be fair, though, I'm not really good at making gradients so I just looked at MDN and searched for "gradient" and followed a few links
Mannix
Mannix2y ago
making gradient? f that i just find one that someone already made 😄
13eck
13eck2y ago
"I'm in this reply and I'm ok with it" ☝️
Aldrin
Aldrin2y ago
with border-image we cant add border radius
Mannix
Mannix2y ago
then use pseudo element
Aldrin
Aldrin2y ago
yes
13eck
13eck2y ago
13eck
13eck2y ago
It's quick-and-dirty so there's a lot of optimizations to be done but it's a good start
MarkBoots
MarkBoots2y ago
I would use background-clips for this the gradient clipped to the border-box the inner color clipped to the padding-box border-color is transparent, but size is controlable https://codepen.io/MarkBoots/pen/OJwbBPK So only 1 div nessessary
13eck
13eck2y ago
To be fair, my version only had one div 😜 It may have also had a div::before but still But yes, yours looks much prettier than mine
MarkBoots
MarkBoots2y ago
yea, dat was not fair of me 😉
capt_uhu
capt_uhu2y ago
fyi you can still use border-image for this but the image would need to include the round corners. Other thought was are those straight up round corner in the original or are those squircles?