CSS: Slice radial-gradient 50% on bottom for another similar radial-gradient?

user_5178677 0
Viewed 6115

If I have this:

https://codepen.io/anon/pen/MveydB

body {
  width: 100vh; height: 100vh;
  background-image: radial-gradient(circle closest-side, #00bffb, rgba(0, 0, 0, 1)); 
}

How I can have something like this instead?:

enter image description here

It's impossible to edit HTML in this case too, because it's a theme for Linux.

radial-gradients css
2 Answers
  1. Set the gradient on half of the container with background-size: 100% 50%,
  2. Position the gradient circle so that only its top half is visible with background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000);

Explanation:

circle 50vh sets the gradient radius to half the size of the container (you need to use a fixed size, thus 50vh, or 200px if your container was 400px tall — % won't work, sadly)

at 50% 100% sets the gradient center in the middle of the bottom edge of the background box.

body {
  width: 100vh;
  height: 100vh;
  background-color: #000;
  background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000); 
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

https://codepen.io/hyvyys/pen/xxKRGwP

user_68051430
Related