CSS radial gradient with bottom linear

kdiffin · 2023-12-30T16:46:10.849Z

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?

K

kdiffinOP•12/30/23, 4:46 PM

this is how the top looks like

K

kdiffinOP•12/30/23, 4:46 PM

  .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%
    )
  }

  .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%
    )
  }

Kkdiffin this is how the top looks like

C

CB•12/31/23, 5:15 PM

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

CSS radial gradient with bottom linear

Similar Threads

Similar Threads

Similar Threads