22 Replies
Inspect the element and copy the code
its in figma 😅
Does Figma not have an "export to CSS" option?
I thought that was one of the main reasons it was used by FE devs
for this there is no proper CSS on figma
this is what it shows
![](https://utfs.io/f/5bb1db3f-e5b1-4b42-a109-a8c240488fcb-1nq2cb.png)
That's of limited help. Way to go, Figma! lol
Can you at least get the two colours used?
![](https://utfs.io/f/4bd26577-6fc5-4d6d-a9f9-a5e9852a0336-1nq2cb.png)
This should be a good starting point:
ohk, let me try
there is a border-image property where you can use a gradient
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 linksmaking gradient? f that i just find one that someone already made 😄
"I'm in this reply and I'm ok with it" ☝️
with border-image we cant add border radius
then use pseudo element
yes
Here's a starting point for you:
https://codepen.io/c__beck/pen/YzjpObO
It's quick-and-dirty so there's a lot of optimizations to be done but it's a good start
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
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 mineyea, dat was not fair of me 😉
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?