How to control height of ellipse in radial gradient

Question

I am trying to use radial gradient for my background and below is the code.

div {
  width: 778px;
  height: 100px;
  background: radial-gradient(ellipse at top center, green, yellow 229px);
  background-size: 100% 100%;
  background-position: 0% 0%;
}

<div></div>

When I increase the height of the div it is appearing as

But we want to have fixed vertical radius for ellipse in radiant like below one

I tried to play around the background-size but the height of the div is not fixed. so I really cant set background-size.

Any help would be greatly appreciated. Thanks in advance.

Clementius

it's a radial, not an ellipsis gradient. you can wrap the div with another div and apply the yellow background there. then it will look like you want – Keratitis

Tried that too, but the content in the div is hiding behind the overlap div. – Clementius

then put the content inside the overlap div but outside the normal div... without more info we can't really help you more. – Keratitis

Answer 1

use values instead of ellipsis

body {
  background: radial-gradient(220px 80px at top center, green, yellow);
  margin: 0;
  height: 100vh;
}

<ending-shape>

Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise

<length-percentage>{2}

Gives the size of the ellipse explicitly. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

Reference: https://drafts.csswg.org/css-images-3/#valdef-radial-gradient-ending-shape

---

Another alternative is to use a fixed background-size:

body {
  background: 
    radial-gradient(farthest-side at top center, green, yellow)
      top center/350px 80px no-repeat,
    yellow;
  margin: 0;
  height: 100vh;
}

Scalable

Is there any good GUI based software for website designing. To move elements, images, etc translates into code. @Temani Afif – Gotha

@Gotha they probably exist but I personnally write all the code myself. Never though about using (or even searching) such tools. I consider tools only for SVG complex shapes – Scalable

Is there any offline version of official documentation for CSS which I can download. For example, PHP offers offline documentation in "chm" and pdf format. But I could not find any official offline documentation from w3.org for CSS. What do you use for offline documentation? @termani Afif – Gotha

@Gotha intresting question but I don't use an offline doc. Since CSS is about web, I always do this online with internet so I don't really need any offline ressource. I doubt such think exist but you can probably scrap the w3.org website or the MDN one to have an offline version. Since it's a static website any scrapping tool can do it easily unless they implemented some securities to avoid scrapping. You will not have it PDF but a HTML website – Scalable