Cut a hole in a background gradient

Question

I would like to cut a hole into this element where the skyblue is so I can see the background. I cannot seem to figure out how to do this. I have seen it done but I cannot duplicate it using a conic-gradient.

This is what I have gotten so far. I have tried to make the skyblue transparent, but that just showed the conic-gradient.

.container { width: 200px; }
.spinner {
  height: 0px;
  width: 100%;
  padding-bottom: calc(100% - 20px);
  margin: 0;
  background: radial-gradient(circle at center, skyblue 54%, transparent 54.8%),
    conic-gradient(from 0deg at center, transparent 45deg, orange 360deg);
  clip-path: circle(46% at center);
}

<div class="container">
  <div class="spinner"></div>
</div>

I also tried using an :after pseudo selector, but that didn't work:

  .spinner:after {
    content: '';
    background: green;
    clip-path: circle(50px at center);
    width: 168px;
    height: 168px;
  }

doing so does make the :after work, but it doesn't work the way I expected. it just shows the color, and if I use transparent it shows the color beneath. — Get Off My Lawn, Apr 09 '21 at 19:04
I think you can do it with https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path scroll to the bottom, you will see a cross going thru the image which is defined in the #cross svg. You can define a circle svg and do it that way. Also see https://stackoverflow.com/questions/22531861/ring-shaped-process-spinner-with-fading-gradient-effect-around-the-ring/22539987 it's done here — Huangism, Apr 09 '21 at 19:29

score 3 · Accepted Answer · answered Apr 09 '21 at 19:18

I was able to figure it out by adding mask-image.

body { background: purple; }
.container { width: 200px; }

.spinner {
  height: 0px;
  width: 100%;
  padding-bottom: calc(100% - 20px);
  margin: 0;
  background: conic-gradient(from 0deg at center, transparent 45deg, orange 360deg);
  clip-path: circle(46% at center);
  -webkit-mask-image: radial-gradient(circle at center, transparent 54%, black 54.8%);
  mask-image: radial-gradient(circle at center, transparent 54%, black 54.8%);
}

<div class="container">
  <div class="spinner"></div>
</div>

Cut a hole in a background gradient

1 Answers1