css

How to create a colored dome background in CSS

Currently my website looks like this when I apply border-radius property to the colored div: Undesired

But I want to it to look like this:

Desired

I know by adjusting border-radius is not enough, any idea how I can achieve the above??

PS: Using image background is not feasible in my case

Solution

  • The dome requires a negative left and right margin and the border radius should be imroved. That should do the trick. Wrapping it in an overflow: hidden container prevents a horizontal scrollbar.

    .dome {
  margin: 10% -25% 0; 
  border-top-left-radius: 100%;
  border-top-right-radius: 100%; 
  padding-bottom: 50%;
}
.gradientbg {
  /* gradient generated with http://www.colorzilla.com/gradient-editor/ using #81badd and #ae85ff*/
  background: rgb(129,186,221);
  background: -moz-linear-gradient(top, rgba(129,186,221,1) 0%, rgba(174,133,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  background: linear-gradient(to bottom, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81badd', endColorstr='#ae85ff',GradientType=0 );
}
.container {
  overflow: hidden;
}
    <div class="container">
  <div class="dome gradientbg"></div>
</div>