How to Implement Curve Background in CSS

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>

How to draw a curve with just CSS

You can just do it using border-bottom radius. Like this:

div{

    background-color:blue;

    width:500px;

    height:90px;

    border-bottom-left-radius:50%;

    border-bottom-right-radius:50%;

}

<div></div>

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>

Can I create a div with a Curved bottom?

CSS:

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

see is this ok for you

div {
  background-color: black;
  width: 500px;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div>
</div>

Curved background image in CSS

Well, you can try this one on for size: http://jsfiddle.net/dg44thbr/10/

body {

  margin: 0;

  background: red;

}

div#back {

  position: relative;

  height: 100px;

  background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg);

  width: 100%;

  border-bottom-left-radius: 250% 160px;

  border-bottom-right-radius: 0;

  margin-left: -2em;

  padding-right: 2em;

}

<div id="back"></div>