# Custom background

**URL:** <https://forum.readymag.com/t/custom-background/2057>\
**Category:** Custom code\
**Created:** [October 10, 2023, 1:09am UTC](https://forum.readymag.com/t/custom-background/2057 "2023-10-10T01:09:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicholas.jacksondesi](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@nicholas.jacksondesi](https://forum.readymag.com/u/nicholas.jacksondesi)\
**Post date:** [October 10, 2023, 1:09am UTC](https://forum.readymag.com/t/custom-background/2057/1 "2023-10-10T01:09:20Z")

</div>

Looking to add a custom background similar to what you see on the front page of [https://www.patreon.com/](https://www.patreon.com/) - I love how the colors change and the blur follows the cursor (once you scroll past the hero section).

any idea how I can replicate that with the custom code widget?  
Also any tips on how to create a blur background like on their nav, that would be dope too.

 ![Screenshot 2023-10-09 at 9.14.24 PM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/5/5aba4c3cc011428b44fc8d8adfa09984455b2252.jpeg)

---

<div class="post-metadata">

**Author:** ![19\_84](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/19_84/32/1283_2.png) [@19\_84](https://forum.readymag.com/u/19_84)\
**Post date:** [October 10, 2023, 6:37pm UTC](https://forum.readymag.com/t/custom-background/2057/2 "2023-10-10T18:37:53Z")

</div>

hey, nicholas!

code for blur:  
[data-id=“COPY&PASTEELEMENTID”] {  
backdrop-filter: blur(10px);  
-webkit-backdrop-filter: blur(10px);  
}

check this article to make gradient back:

> **[Gradient](https://help.readymag.com/hc/en-us/articles/4409514751003-Gradient-)**
>
> Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project. We recommend enlisting a profe...

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [October 10, 2023, 6:53pm UTC](https://forum.readymag.com/t/custom-background/2057/3 "2023-10-10T18:53:28Z")

</div>

it seems, they are using javascript to paint on a canvas in the background. above this are laying different elements, like typo and images etc, which are sometimes have css-blending modes assigned. So the main thing is to create a javascript mousepaint snippet.

Here I would start on looking into codepen to get an idea how this can work.  
e.g. **[here](https://codepen.io/gvissing/pen/oNQpjLZ)**, or **[here](https://codepen.io/bazylevnik0/pen/vYQWVON)**, or **[here](https://codepen.io/tofjadesign/details/qBQpGVz)**

there are for sure hundred of other examples out the in the web you can change to your desire. But you will for sure need some knowledge in css, js, general html…