Somewhere in the <head>
<script src="/js/abb.min.js"></script>
<div id="background-blobs" class="hero">
<h1>Animated Background Blobs</h1>
</div>
Before the closing </body>
only "element" is required, defaults shown
<script>
abb({
element: "#background-blobs",
speed: 1,
opacity: 1,
saturate: 1,
invert: false,
blur: 0,
grain: {
strength: 1,
opacity: 0.5,
blur: 0
},
background: "#a5d798",
colors: ["red", "violet", "magenta", "cyan", "orange"]
})
</script>
<style>
required
#background-blobs{
position: relative;
overflow: hidden;
}
#background-blobs:before,
#background-blobs:after{
position:absolute;
z-index: -1;
content: "";
top: -10%;
left: -10%;
width: 120%;
height: 120%;
pointer-events: none;
}
your background styles
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
width: 100%;
min-height: 100vh;
}
</style>
Try the Sandbox