Background gradient

Custom code
1

Hi lovely readymag users, I was wondering if it is possible to make the background a gradient with custom code?

2

Hi @arizona,

Please find below a couple of ways in which to create background gradient using custom code.

METHOD 1.
We prefer this method as it’s more robust and doesn’t show up as another element on the project settings. It’s also the best method if you wish to have a gradient for every single page. Please note: this will only display upon preview or upon publishing however.

Add the following to the of your project.

<style>
  .mag,
  .mag-pages-container,
  .container,
  .page {
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(180deg, red, yellow);
  }

  .page-fixed-bg-container {
    display: none !important;
  }
</style>

METHOD 2.
Add in a code injection element and paste in the following code. Click ‘Save & Close’, then under the position options (the small pin icon on the right hand side’ set the it to full width and full height.

<div id="background_gradient"></div>

<style>
  #background_gradient {
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(180deg, red, yellow);
  }
</style>

I’ve also linked here a test project with two pages to show both methods in action.

``

1 Like