How to apply linear gradient to the border of circle?

Question

I am trying to achieve linear gradient in the circle of the label like below image in ionic:

At first, i made a circle at the start of the input using below code:

// in .html

<ion-item class="wrapper border-radius-23">
  <ion-label class="email-label">
    <ion-icon name="person" class="text-red"></ion-icon>
  </ion-label>
  <ion-input clearInput type="text" placeholder="Email" class="user-email-input"></ion-input>
</ion-item>

// in .scss file

  .user-email-input {
    height: 46px;
    width: 100%;
    display: block;
    border-radius: 23px;
    box-sizing: border-box;
    padding-left: 50px;
    outline: none;
  }

  .email-label {
    border-radius: 50%;
    border: 2px solid red;
    position: absolute;
    top: -13px;
    left: 0;
    width: 46px;
    height: 46px;
    z-index: 9;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

and achieved like below:

Now, when i tried to apply gradient in the circle, i could achieve only like below:

I changed the css of the email label like below:

.email-label {
        border-image: linear-gradient(to right, red 0%, orange 100%);
        border-image-slice: 1;
        border-radius: 50%;
        border: 2px solid;
        position: absolute;
        top: -13px;
        left: 0;
        width: 46px;
        height: 46px;
        z-index: 9;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }

Can anyone point my mistake?

score 10 · Accepted Answer · answered Mar 21 '18 at 15:56

You can make the gradient circle as follows:

.rounded {
  width: 100px;
  height: 100px;
  border: 4px solid transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), linear-gradient(to right, red, orange);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="rounded"></div>

How to apply linear gradient to the border of circle?

1 Answers1