Search code examples
htmlcssoverlaycss-gradients

Making Curvy shape using CSS

Hi I want make a grayish (#444) curvy overlay on a banner image of my website. I am attaching a image of what I want.

enter image description here

Solution

  • This can be achieved by using CSS Radial Gradients.

    You can either use an additional div or if you want you could use pseudo elements.

    I have used multiple div's to show you how it would look all built together.

    .container {
  width: 900px;
  height: 300px;
  position: relative;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: -webkit-radial-gradient(100% 21.875%, transparent 0%, transparent 20%, #444 45%);
  background: radial-gradient(at 100% 21.875%, transparent 0%, transparent 20%, #444 45%);
  background-size: 100% 225%;
}
.overlay .text {
  width: 50%;
  padding: 20px;
  color: white;
}
    <div class="container">
  <img src="http://lorempixel.com/900/300/" width="100%" height="auto" />
  <div class="overlay">
    <div class="text">
      <p>Some Text</p>
    </div>
  </div>
</div>