How can I create a soft curve in CSS?

user_1347443 0
Viewed 3464

Is it possible to create a curved block like in the example image using only CSS (no images/svg) ?

enter image description here

css-shapes background css
6 Answers

You can use a radial-gradient to do this. What's happening is we have one radial gradient that makes an ellipse that is much, much, much larger than the actual element. There is then another ellipse which goes behind that, for the second colour. Something like this:

.thing {
    padding: 100px 20px 50px 20px;
    background-image: radial-gradient(ellipse 100% 200% at 50% 200%, #f43 90%, #0000 90%),
        radial-gradient(ellipse 100% 200% at 50% 190%, #f87 90%, #0000 90%);
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    color: white;
}
a {
    color: inherit;
    background: #111;
    padding: 10px;
    text-decoration: none;
}
<div class="thing">
    <p>Ready to get started?</p>
    <a href="">Schedule a demo</a>
</div>

user_132669740

Try using this:

.container{
  width: 100%;
  overflow: hidden;
}
.background{
  height: 80vh;
  background-color: #e44627;
}

.effect_curve{
  position: relative;
  top: 50px;
  left: -50%;
  width: 200% !important;
  border-radius: 50% 50% 0 0;
}
.effect_curve::after{
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #e44627;
  transform: rotate(2deg);
  z-index: -1;
  opacity: 0.2;
}
.effect_curve::before{
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #e44627;
  transform: rotate(-0.5deg);
  z-index: -1;
  opacity: 0.2;
}
<div class="container">
  <div class="background effect_curve">
  </div>
</div>

user_94679570
Related