CODEWITHSUNDEEP
cssradial-gradients
satish kumar V
satish kumar V

Reputation: 1755

How to control height of ellipse in radial gradient

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.

Upvotes: 7

Views: 3349

Answers (1)

Temani Afif
Temani Afif

Reputation: 273483

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;
}

Upvotes: 9

Related Questions