6

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>

enter image description here

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

enter image description here

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

enter image description here

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
satish kumar V
  • 1,695
  • 6
  • 33
  • 47
  • 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 – cloned Jul 19 '19 at 10:03
  • Tried that too, but the content in the div is hiding behind the overlap div. – satish kumar V Jul 19 '19 at 10:05
  • then put the content inside the overlap div but outside the normal div... without more info we can't really help you more. – cloned Jul 19 '19 at 10:09

1 Answers1

8

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;
}
Community
  • 1
  • 1
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Is there any good GUI based software for website designing. To move elements, images, etc translates into code. @Temani Afif – Pie Jul 19 '19 at 14:45
  • 1
    @Pie 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 – Temani Afif Jul 19 '19 at 14:49
  • 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 – Pie Jul 19 '19 at 18:23
  • 1
    @Pie 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 – Temani Afif Jul 19 '19 at 19:06