background shape with smoothness css

Question

how to create this shape in background. I tried using radial-gradient but still, the smoothness of round is not there. I also tried clip-path but it is cutting my other images on this page. I want this shape as my background colour. Is there any way?

I used background-image: radial-gradient(circle farthest-corner at 50% -249%, #117FC8, 90%, white 55%). But in this the round shape has little square.I want smooth curve.

Welcome to stack over flow please add a minimum reproducible example — Dinesh s, May 03 '21 at 09:35
try `background-image: radial-gradient(circle farthest-corner at 50% -249%, #117FC8 90%, white 92%)` — Temani Afif, May 03 '21 at 11:01
Thanks. I found my mistake. I used white 90.1%. Your answer gave me this idea. — ultraGoku, May 03 '21 at 11:24

score 0 · Answer 1 · answered May 03 '21 at 10:38

0

Here I used ::before to create that shape

div {
  position: relative;
  height: 200px;
  width: 300px;
  border: 1px solid #000;
  overflow: hidden
}
div::before {
  content: '';
  position: absolute;
  height: 300px;
  width: 600px;
  background-color: #00f;
  border-radius: 50%;
  bottom: 60px;
  left: -150px
}

<div></div>

answered May 03 '21 at 10:38

Prakash M

390
4
4

Thanks for your ans but the image I shared is a full width page and I want to create this shape as a background image. I tried your solution but it will overwrite my content of this page. – ultraGoku May 03 '21 at 10:55
Pls share your code with snippet. [FFI](https://stackoverflow.com/help/formatting) – Prakash M May 03 '21 at 11:05

score -1 · Answer 2 · answered May 03 '21 at 10:24

-1

You could use SVG shape instead of CSS shape. MDN reference

answered May 03 '21 at 10:24

nekromenzer

334
2
16

background shape with smoothness css

2 Answers2