How to Create a Curve on the Top of a Background

How to create a curve on the top of a background?

You can adjust your code like below:

.box {
  margin-top:90px; /* make it at lealst the same as the height of the pseudo element */
  width:200px;
  height:100px;
  background:white;
  position:relative;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  bottom:100%;
  width:50%;
  left:0;
  height:80px; /* adjust this to control the height */
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%,#0000) top,
    radial-gradient(50% 100% at top right  , #0000 98%,#fff) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  transform-origin:right;
  transform:scaleX(-1);
}
body {
  background:pink;
}

<div class="box">
</div>

how to created a curved background on top of image

I hope the below-given snippet helps!

.bg {  background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");  height: 200px;  background-size: cover;  background-position: center;  overflow: hidden;}
.bluebg {  background: rgba(135, 206, 235, 0.5);  height: 140%;  width: 90%;  -webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);  mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);}

<div class="bg">  <div class="bluebg"></div></div>

How can I create a soft curve in CSS?

.curveArea {  width: 500px;  height: 200px;  margin: 0 auto;}
.mainBox {  height: 100%;  background: #fff;  overflow: hidden;}
.curveSection {  width: 200%;  height: 100%;  border-radius: 50%;  background: #e44627;  top: 25%;  left: -50%;  right: 0;  position: relative;  border-top: 10px solid #fdedea;}

<div class="curveArea">  <div class="mainBox">    <div class="curveSection"></div>  </div></div>

Curving background color center with css top to bottom

You can use multiple gradients like this:

<!DOCTYPE html>
<html>
  <head>
<style>
  #container {
    height: 200px;
    width: 400px;
    background: radial-gradient(
        ellipse 100% 40% at 50% 14%,
        #E8F3F9  30%,
        40%,
        transparent 40%
      ),
      conic-gradient(
        at 50% 30.3%,
        #E8F3F9  0.235turn,
        transparent 0.235turn 0.765turn,
        #E8F3F9  0.765turn
      );
    border: 1px dotted wheat;
  }
</style>
  </head>
  <body>
<div id="container"></div>
  </body>
</html>

curved div with transparent top

You can use clip path in both ways (on the top element or the bottom one) and simply make top and bottom to overlay like this :

.first,
.second {
  display: inline-block;
  margin: 5px;
}

.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

.second .top {
  height: 200px;
  width: 200px;
  background:url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

How do I make top and bottom of a section curved inwards instead of outwards using html and css with an image in as the background?

You can use the same path and rotate it by 180 degrees, then absolutely position it on the bottom of the section. To make sure the elements heights fits I had to add an explicit heights on the section element.

section {
    margin: 60px 0;
    height: 400px;
    position: relative;
}
#statistics {
  background: url(https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2015/01/blend-mode-example-screenshot.png);
  background-size: cover; 
  background-attachment: fixed;
  background-position: center;
}
#bigHalfCircleCandyBottom {
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  left: 0;
}

<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>

<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>

How to make a curve on a rectangle's top in css? only in top edge

Here are DEMO

HTML:

<div id="gray">
    <div id="red"></div>
</div>

CSS:

#gray{

  height: 100%;
  background-color: #ccc;
  overflow: hidden;  
}

#red{

  width: 150%;
  height: 150%;
  background-color: #f00;
  border-radius: 100%;
  top: 50%;
  left: -25%;
  right: 0;
  position: relative;
}

How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?

Here is how I would attempt it. It will probably take a bit of finessing to make it work for your site, but hopefully you can see the technique I used.

Basically you are using divs as the background to content and translating them to overlay. Then putting any content in a container that you can change the z-index on to bring above everything else. The curve itself is just a border-radius of 50% and skewed wider than tall. Then the content's parent div has the gradient color background.

I do like the simplicity of Temani's solution though.

/* top ellipse */.top {  border-radius: 50%;  width: 150%;  height: 200px;  transform: translate(-15%, 20%);  background: white;}
/* content's parent container */.mid {  padding: 4rem;  background: linear-gradient(-20deg, #3adecf, #3ae3c5);}
.content {  position: relative;  z-index: 20;  color: white;  font-size: 30px;}
/* bottom ellipse */.bottom {  border-radius: 50%;  width: 200%;  height: 200px;  transform: translate(-25%, -20%);  background: white;}
.all {  overflow-y: hidden;  position: relative;}
.t-circle {  background: #00ccdd;  position: absolute;  top: 5%;  right: -200px;  z-index: 10;  width: 400px;  height: 400px;  border-radius: 50%;  opacity: 0.2;  pointer-events: none;}

<div class="all">  <div class="top">Top</div>  <div class="mid">    <div class="content">        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien mauris, efficitur in nisi vel, gravida mollis urna. Praesent ac sem vitae neque pretium ultricies. Vestibulum id mattis neque. Nullam ultricies neque eget metus volutpat, et tempus magna commodo. Phasellus accumsan lacus nibh, at commodo elit pellentesque at. Morbi iaculis bibendum massa, sit amet accumsan felis ullamcorper a. Praesent luctus odio vel tortor finibus feugiat. Sed luctus finibus nisl, in pellentesque orci efficitur ut. Curabitur suscipit elementum aliquam. Sed vel convallis urna.      <br><br>        Phasellus porttitor blandit ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam elementum rhoncus diam ac rhoncus. Nunc sed lorem porttitor, placerat sem vitae, bibendum nunc. Ut dolor mi, condimentum vitae leo in, suscipit maximus risus. Morbi consequat dui eros, sit amet dapibus urna porta tempor. Fusce mollis a velit nec auctor. Donec semper elementum feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vel turpis pellentesque, ultricies metus blandit, interdum nibh. Duis malesuada dolor lacus, quis tempor erat elementum in. Pellentesque at consequat nisl. Vestibulum vel urna nec ipsum interdum pellentesque id nec magna. Mauris eu lectus posuere, aliquet justo id, pharetra nisl.       </div>    </div>  <div class="bottom">bottom</div>  <div class="t-circle"></div></div>

How to Create a Curve on the Top of a Background