Question 394498 in Html Question posted in
Some basic documentation can be found here.

Html – Background with linear gradient half circles at corners

I want to create this background with css and on top of it I will add content
enter image description here

What I tried is this

.circle-top {
  background-image: linear-gradient(180deg, rgba(242, 242, 255, 0) 77.04%, #ebebff 100%);
  width: 95vw;
  height: 100vh;
  border-radius: 50%;
  position: absolute;
  transform: rotate(20deg);
  right: -40%;
  top: -10%;
}
<div class="circle-top">

But I am not sure if it’s a good solution for this case. If someone can help

Tags:

2

Answers


  1. 0

    Your solution is fine. I understand you feel uncomfortable adding DOM elements in order to create a background, but it’s commonly done the way you did it. You’d add one more ball for the other side. The benefit to this solution is that you have full control over what happens to the positions / sizes of the balls when the browser viewport changes.

    Just make sure to set overflow: hidden somewhere in a parent container, such that these balls do not cause horizontal overflow on your page.

    And in order to have content inside the container that overlap the balls, you’d make a container that has relative position, (and for example give it a z-index of 1)

    <div style="position:relative;z-index:1;min-height:80vh">your content...</div>

    (I’ve also given it a minimum height such that the background will align even with little content)

    Login or Signup to reply.
  2. 0

    You can just use multiple background radial gradients to the body or an overall container.

    Just adjust the percentage values and/or color stops for whatever effect you require.

    * {
  margin: 0;
  padding: 0;
}

body {
min-height:100vh;
    background-image: radial-gradient(circle at top right, rgba(242, 242, 255, 0), #ebebff 22%, transparent 22%, transparent),
      radial-gradient(circle at bottom left, rgba(242, 242, 255, 0), #ebebff 12%, transparent 12%, transparent);;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search