Theo's Typesafe Cult•12mo ago

CSS radial gradient with bottom linear

here the background of this page is a radiel gradient, but i want the bottom to gradually fade to black without the top changing, any ideas?

2 Replies

kdiffinOP•12mo ago

this is how the top looks like

  .radial-gradient-homepage {
    background: rgb(51, 23, 45);

    background:
    radial-gradient(
      circle,
      rgb(0, 0, 0) 8%,
      #5f154a 40%,

      rgba(0, 0, 0, 1) 100%
    )
  }

  .radial-gradient-homepage {
    background: rgb(51, 23, 45);

    background:
    radial-gradient(
      circle,
      rgb(0, 0, 0) 8%,
      #5f154a 40%,

      rgba(0, 0, 0, 1) 100%
    )
  }

Connor B•12mo ago

That break in the gradient, I’m guessing it’s two separate divs? Maybe you could wrap both us the background on the wrapper and use background-position to shift the visual centre of the gradient to be in the top quartile of the two divs

Gaming

Programming

CSS radial gradient with bottom linear