cssradial-gradientsui-design

Pure CSS gradient circle border


I have this UI requirement enter image description here

At the moment, I have a working solution of a div (with a fixed height and width and a background image for the outer gradient border) and a pseudo element, positioned 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, am looking for a more elegant solution (pure css or svg gradient?) without the use of background images where the gradient can scale with no pixelation.

I have researched and closest I have come across is https://codepen.io/nordstromdesign/pen/QNrBRM and Possible to use border-radius together with a border-image which has a gradient? But I need a solution where the centre is transparent in order to show through the page's background

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


Solution

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

    SVG has a circle element that can be used to draw a circle shape. This shape 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>