Looking to add a custom background similar to what you see on the front page of 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.
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:
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, or here, or here
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…
