Search code examples
htmlcssbackground-imagelinear-gradientsborder-radius

linear-gradient with a border-radius at certain percentages

body {
  background-image: linear-gradient(
      0deg,
      var(blue) 70%,
      var(red) 30%
    )
    no-repeat;
  height: 100vh;
}

enter image description here

1) How to add a border-radius at the exact bottom left and right corners of the red background-color?

As i require the border-radius in the red color which is part of the linear-gradient, i don't know how.

Its just on the body element.

Solution

  • This snippet puts the red background onto the after pseudo element which is given 30% of the overall height of the body and has the two bottom corners rounded.

    The before pseudo element is given the blue background.

    body {
  --blue: blue;
  --red: red;
  height: 100vh;
  width: 100vw;
}

body::before,
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

body::before {
  background-color: blue;
  height: 100%;
}

body::after {
  height: 30%;
  background-color: var(--red);
  border-radius: 0 0 20px 20px;
}
    <body></body>

    It is possible to combine linear and radial gradients to get a rounded effect, but I find the result isn't always as crisp as using border rounding.