CODEWITHSUNDEEP
cssgradient
Sebastian Olsen
Sebastian Olsen

Reputation: 10878

border-radius gradient with transparent background

I have this simple CSS spinner, here:

html {
  background: black;
  
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

@keyframes k__common-spin-cw {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wd-spinner {
  height: 30px;
  width: 30px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
  border-width: 2px;
  border-radius: 100%;
  border-top-color: #00ba8c;
  -webkit-animation: k__common-spin-cw 700ms linear infinite;
  animation: k__common-spin-cw 700ms linear infinite;
}
<div class="wd-spinner"></div>

Is it possible to have a gradient border with border-radius, and instead of having the tail of the highlighted border-top just abruptly end, make it a nice gradient fade, while also keeping the background transparent?

Upvotes: 1

Views: 1024

Answers (1)

vals
vals

Reputation: 64164

I have removed the animation and increased the size to make the effect more easily visible.

With a pseudo, I have added a shadow of the same color than the border to create the fade.

Hover on the div and the overflow hidden will be applied, setting the final effect

html {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.wd-spinner {
  height: 200px;
  width: 200px;
  border-radius: 100%;
  position: relative;
}
.wd-spinner:hover {
  overflow: hidden;
}
.wd-spinner:after {
  content: "";
  position: absolute;
  height: 196px;
  width: 196px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
  border-width: 2px;
  border-radius: 100%;
  border-top-color: #00ba8c;
}
.wd-spinner:before {
  content: "";
  position: absolute;
  height: 196px;
  width: 196px;
  top: 2px;
  left: 2px;
  border-radius: 100%;
  box-shadow: -40px -40px 70px -22px #00ba8c;
}
<div class="wd-spinner"></div>

Upvotes: 1

Related Questions