Gradient Circle Border

HTML

<div class="circle bottom-to-top">1</div>

CSS

body {
    margin: 20px;
    background: red;
}

.circle {
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 100px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    padding: 20px;
}

.circle:before {
    border-radius: 100%;
    content: '';
    background-image: linear-gradient(to bottom, #1ca844 0%, #4bcd7d 100%);
    padding: 5px;
    width: 100px;
    height:100px;
    top: -5px;
    left: -5px;
    position:absolute;
    z-index:-1;
}