Recreate a circle gradient border
So I'm creating a website based on a design and I have to recreate the reviews section (which has the reviews all around the circles), which has those interesting circles with gradients. I was wondering which way is more logical - doing with a gradient or with border?
Here's a link to the design - https://dribbble.com/shots/25168170-Web-App-Landing-Page.
Thanks in advance!
Dribbble
Web App Landing Page
8 Replies
you could do both, but i think a border might render more nicely
Can you combine border and gradient that would be fun
OK, so I tried doing with a border and a gradient... xD
However,
border-radius won't apply to it...
Here's the code: https://github.com/GeorgeDash/alpine-cargo.
I'm using Tailwind CSS.unfortunately
border-radius and border-image don't work together and probably never will... but you can recreate this with layered background images with different background-origin values: https://codepen.io/jsnkuhn/pen/LEPePXpIf you for whatever reason need a transparent background you can use the approach from this pen; putting the gradient on a pseudo element with some masking. The pen also includes a much simpler solution for browsers with support for
background-clip: border-area (only Safari for the time being). https://codepen.io/nilaallj/pen/dyBLqbVOMG, thank you so much!
I really appreciate it; I'm gonna try it later and see if it works for me!
Thank you, too!
OK, so I tried it and it worked! Thank you so much again, both of you!
@nilaallj Is there a way to change the size of the gradient?
Not sure exactly what you mean by that. If you want to change the size of the border you change the border width (which is a variable in this solution in order to work with the pseudo element). If you want to change the size of the entire element you use width and hight. The gradient itself is a background image of the entire element, you can change it with the gradient variable. š
Yeah, I meant with the width and the height, thanks!
š