2

I want to get the result below but without using the at syntax because it's not supported in Safari, I'm having a hard time with it. Does any one know any approach? Thank you in advance!

#content {
  background-color: black;
  height: 300px;
  width: 500px;
}

#inverted-circle {
  background: radial-gradient(110% 200% at 50% 0, white 49.9%, rgba(255,255,255,0) 50.05%);
  position: relative;
  content: '';
  height: 220px;
  width: 100%;
}
<div id="content">
  <div id="inverted-circle"></div>
</div>

It's still not working on Safari on iOS

not working on safari

CalistoQueets
  • 37
  • 4

1 Answers1

2

Consider background-size/background-position. You make the background twice bigger in height, you divide the vertical radius by 2 and you place your background at the bottom.

#content {
  background-color: black;
  height: 300px;
  width: 500px;
}

#inverted-circle {
  background: 
    radial-gradient(110% 100%, white 49.9%, transparent 50.05%) 
    bottom/
    100% 200%;
  height: 220px;
  width: 100%;
}
<div id="content">
  <div id="inverted-circle"></div>
</div>

Related to get more details: How to animate a radial-gradient using CSS?

You can also optimize your code with only one element:

#content {
  height: 300px;
  width: 500px;
  background: 
    radial-gradient(55% 36.5%, white 99.5%, black 100%) 
     bottom /
     100% 200%;
}
<div id="content">
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415