CODEWITHSUNDEEP
htmlcss
bertone_in
bertone_in

Reputation: 67

CSS3 clip-path or something else?

I cant find out how to achieve this effect, I'm familiar with parallax effect, but how can I make this "clip-path" effect or whatever is it called, where circles are transparent so image background can be seen through it?

enter image description here

Upvotes: 0

Views: 56

Answers (1)

vals
vals

Reputation: 64264

You can use box-shadow and border-radius

body {
  background: linear-gradient(blue, lightblue);
}
html, body {
  height: 100%;
}

.base {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 30px;
}
.inner {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 40px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 1000px white;
  color: white;
  font-size: 40px;
}
<div class="base">
  <div class="inner">TEST</div>
</div>

Upvotes: 1

Related Questions