Geek Answers Handbook

Clean CSS Gradient Border

I have this user interface requirement enter image description here

I currently have a working div solution (with a fixed height and width and background image for an external gradient border) and a pseudo-element located absolute with a background image of the inner border.

 .div { position: relative; width: 254px; height: 254px; border: 2px solid transparent; border-radius: 50%; background: url(../img/gradient_border_circle.png) no-repeat 50%; } div:before { content: ""; position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; width: 98px; height: 98px; border-radius: 50%; background: url(../img/gradient_border_circle_inner.png) no-repeat 50%; }

However, I am looking for a more elegant solution (pure CSS or svg gradient?) Without the use of background images, where the gradient can scale without pixelation.

I researched and closer than I met, https://codepen.io/nordstromdesign/pen/QNrBRM and Can I use the -radius border with a border image with a gradient? But I need a solution where the center is transparent to show through the background of the page

Update: ideally, I am looking for a solution with relatively good support in all modern browsers.

+7
css ui-design radial-gradients
source share
2 answers

SVG is the recommended way to create a circle shape and draw a gradient / border around it.

SVG has a circle element that can be used to draw a circle shape. This form can be filled and outlined with a solid color, gradient or pattern.

 * {box-sizing: border-box;} body { background: linear-gradient(#333, #999); text-align: center; min-height: 100vh; padding-top: 10px; margin: 0; } svg {vertical-align: top;} 
 <svg width="210" height="210"> <defs> <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#f5d700" /> <stop offset="1" stop-color="#0065da" /> </linearGradient> <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient> </defs> <g fill="none"> <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" /> <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" /> </g> </svg>
+4
source share

You can use mask to achieve what you are looking for. You will need an SVG file with a transparent circle. Here I used an image from the Internet, but you can make your own to suit your needs:

 mask: url(circle.svg);
0
source share

More articles:


All Articles