Using SVG:
For such figures, I would recommend SVG for two main reasons: (1) Arcs can be created very easily using SVG, and this means that the upper part will be transparent by default (2) the SVG stroke (border) can be set to a gradient . This means that we do not need to fill the arc / circle with a gradient, and then apply a white circle to it, and this, in turn, means that the central part can also be transparent.
The path elements that create two arcs use trigonometric equations to determine the endpoints of the arc. Thus, they can be easily modified if the arcs should be longer or shorter.
The gradients used are roughly equivalent to those that were called into question, but closer similarity can be achieved by further setting the color breakpoints.
Demo:
div { position: relative; height: 250px; width: 250px; border-radius: 50%; } svg { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; } path { fill: transparent; stroke-width: 4; } #left-half { stroke: url(#left-border); } #right-half { stroke: url(#right-border); } body { background: radial-gradient(circle at center, aliceblue, steelblue); min-height: 100vh; }
<div> <svg viewBox='0 0 104 104'> <linearGradient id='left-border' gradientUnits='objectBoundingBox' gradientTransform='rotate(50,0.5,0.5)'> <stop offset="0%" stop-color="rgb(71, 207, 215)" /> <stop offset="100%" stop-color="rgb(113, 230, 178)" /> </linearGradient> <linearGradient id='right-border' gradientUnits='objectBoundingBox' gradientTransform='rotate(310,0.5,0.5)'> <stop offset="0%" stop-color="rgb(217, 63, 177)" /> <stop offset="100%" stop-color="rgb(217, 56, 111)" /> </linearGradient> <path d='M52,102 A50,50 0 0,1 19.86,13.69' id='left-half' /> <path d='M52,102 A50,50 0 0,0 84.14,13.69' id='right-half' /> </svg> </div>
Output screenshot: (background added to show circle is transparent except for borders)
CSS usage:
Using CSS, you can use two separate linear-gradient background images (one for the left half of the border and the other for the right half) that have an angle and then overlay them with two white circles (created using radial-gradient ) to create one same effect as in the question. To make the top part transparent, you can put all the material in a pseudo-element, place it just above the parent element, and then pin the top part using overflow: hidden for the parent.
The disadvantage is that the central part of the circle should be a solid color (white or something else). It cannot be transparent. We can use mask images to create a transparent center, but browser support for it is very low. It is supported only by browsers working with WebKit.
Demo:
div { position: relative; height: 250px; width: 250px; overflow: hidden; } div:after { position: absolute; content: ''; height: 100%; width: 100%; left: 0px; top: -20%; background: radial-gradient(circle at center, white 64%, transparent 65%), radial-gradient(circle at 50% -50%, white 50%, transparent 51%), linear-gradient(310deg, rgb(113, 230, 178), rgb(71, 207, 215)), linear-gradient(50deg, rgb(217, 63, 177), rgb(217, 56, 111)); background-size: 100% 100%, 100% 100%, 50% 100%, 50% 100%; background-position: left top, left top, left top, right top; background-repeat: no-repeat; border-radius: 50%; }
<div></div>
Note. . One of the radial gradients could be avoided using the same method that the shaft used in its answer, but the other (located above the element) cannot be avoided, since this approach does not use a constant color for the left and right borders. He is trying to imitate the image in question, which also does not have a constant color on the left and right. Achieving this effect using borders will be tough. (This does not mean that the other answers are bad / wrong, but only this answer is different).