Curving background color center with css top to bottom-CodePudding

I'm attempting to add a slight curve to the center of my background color. I'm attempting I am applying a linear gradient background color which will then cut off and turn into a white background.

I'd like to apply this slight curve in the center which can be seen here:

I've attempted to accomplish this by adding a border-bottom left and right radius to curve the background which does work but the curves are applied more on the edges whereas I am attempting to curve slightly from the center.

Here is an example of my code:

.content-container {
  height: 150px;
  background: linear-gradient(180deg, #FAFDFF 0%, #E8F3F9 100%);
  border-bottom-left-radius: 13%;
  border-bottom-right-radius: 13%;
}

<div class="content-container">
<p>Testing</p>
<br/>
<br/>
<p>Testing</p>

</div>

I've attempted to try and do negative percentages to possibly focus the curve more towards the center like the image above but I have had no luck. How can I achieve something similar to the image above?

CodePudding user response：

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>

CodePudding user response：

I found some people using the pseudo-elements:: before and::after to create 2 backgrounds then manipulate the border-radius. I don't think it gets to what you desire but wanted to share.

Source: https://www.youtube.com/watch?v=70NDGHpN9uM

.content-container {

}

.content-container::before {
  content: "";
  height: 150px;
  width: 50%;
  position: absolute;
  background: linear-gradient(#FAFDFF 0%, #E8F3F9 100%);
  top: 0;
  left: 0;
  border-bottom-left-radius: 100%;

}

.content-container::after {
  content: "";
  height: 150px;
  width: 50%;
  position: absolute;
  background: linear-gradient(#FAFDFF 0%, #E8F3F9 100%);
  top: 0;
  right: 0;
  border-bottom-right-radius: 100%;

}

<div class="content-container">


</div>

You can also use a image as a background:

body {
  background: url("https://i.stack.imgur.com/J8lap.png");
  background-size: contain; /*USE Cover instead*/
  background-repeat: no-repeat;
}

<div class="content-container">
<p>Testing</p>
<br/>
<br/>
<p>Testing</p>

</div>

I hope this helps! Let me know if you find another way.

Best,

Andrew

CodePudding user response：

css

.shape {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.shape::before {
  border-radius: 100%;
  position: absolute;
  background: linear-gradient(#FAFDFF 0%, #E8F3F9 100%);
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}

html

<div class="shape"></div>