Search code examples
cssradial-gradients

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

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.

Solution

  • 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>