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

Question

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?:

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

Basir

You could simply place a black div over half of it. Be sure to bring it forward with a z-index – Zealous

@Zealous It's impossible to edit HTML, I would have done it if I could. – Basir

Answer 1

Cover with a linear gradient

Paint a half transparent, half black linear gradient on top of it.

.bg {
  width: 100vh;
  height: 100vh;
  background: linear-gradient(to bottom, transparent 50%, black 50%),
              radial-gradient(circle closest-side, #00bffb, black);
}

body {
  margin: 0;
}

<div class="bg"></div>

Or

Cover with a pseudo element

If you want to create a radial gradient with two halves of different color, you can use a pseudo element with half the height of the parent.

.bg {
  position: relative;
  width: 100vh;
  height: 100vh;
  background: radial-gradient(circle closest-side, yellow, black);
}

.bg::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 50%;
  background: radial-gradient(circle closest-side, #00bffb, black);
  background-size: 100% 200%; /** we need to compensate for the 50% height **/
  content: '';
}

body {
  margin: 0;
}

<div class="bg"></div>

Nodababus

I've added another option that might be a better fit if you want to have 2 linear gradients. – Nodababus

Answer 2

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

Trogon

This answer needs more love! – Storehouse

@Storehouse Thanks! I updated the answer to make it even more love-worthy. – Trogon