# Background gradient

**URL:** <https://forum.readymag.com/t/background-gradient/160>\
**Category:** Custom code\
**Created:** [April 6, 2022, 4:00pm UTC](https://forum.readymag.com/t/background-gradient/160 "2022-04-06T16:00:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![arizona](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/arizona/32/147_2.png) [@arizona](https://forum.readymag.com/u/arizona)\
**Post date:** [April 6, 2022, 4:00pm UTC](https://forum.readymag.com/t/background-gradient/160/1 "2022-04-06T16:00:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [April 8, 2022, 10:20am UTC](https://forum.readymag.com/t/background-gradient/160/2 "2022-04-08T10:20:10Z")

</div>

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.

```auto
<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.

```auto
<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.

> **[Gradient Background](https://dev.headless.horse/gradient-backgrounds)**

``