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

Html – Create a full width semi circle with a div and radial gradient

I am trying to replicate the following footer design that uses a full width semi circle.

enter image description here

I’m attempting this simply with a radial-gradient background for my footer:

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  background-image: radial-gradient(circle at center bottom, #387546, #387546 50%,transparent 50%);
  height: 30vh;
}
<footer></footer>

Here is the result I get:
enter image description here

How can I modify my radial-gradient to achieve this? Or is there a better method of getting the desired effect? (I’m just looking for the green semi-circle part of the design)

Tags:

2

Answers


  1. 0

    You might play with gradient size and position, and background size and position:

    footer {
    width: 100%;
    position: relative;
    bottom: 0;
    background: radial-gradient(100% 120vh at 50% calc(100% + 30vh), #387546 calc(50% - 2px), #38754600 50%) 50% / calc(100% + 60vh) 100%;
    height: 30vh;
}
    <footer></footer>
    Login or Signup to reply.
  2. 0

    You can do it with a simple syntax

    footer {
  --r: calc(30vh + 80vw); /* the radius (update like you want) */
  
  background: radial-gradient(var(--r) at 50% var(--r), #387546 calc(100% - 1px), #0000);
  height: 30vh;
  
  min-height: 150px;
}
    <footer></footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search