So if you follow along in the video, I refer to this blog post for you to either enter code at certain points into the Custom CSS option inside the main container, so below is everything you will need!
To create the code to your own mesh design, click this button below to go to CSSHero
The css code used in the Main Container that houses the Custom CSS animation.
This is the animation code, put it into the Custom CSS tab under Advanced Settings of the main container,
remember to give a custom css class to the container you are using this code in.
.animated-mesh-gradient-background{
/* place your gradient code in this spot here*/
animation: animatedgradient 10s ease infinite;
background-size: 200% 200%;
}
@keyframes animatedgradient {
0% {
background-position: 0% 25%;
}
25% {
background-position: 100% 50%;
}
50% {
background-position: 50% 75%;
}
75% {
background-position: 25% 25%;
}
100% {
background-position: 0% 25%;
}
}
This is the example I sued exactly in the video, put it into the Custom CSS tab under Advanced Settings of the main container,
remember to give a custom css class to the container you are using this code in.
.animated-background{
background-color:#ff99ac;
background-image:
radial-gradient(at 0% 77%, hsla(167,66%,79%,1) 0px, transparent 50%),
radial-gradient(at 54% 10%, hsla(296,65%,73%,1) 0px, transparent 50%),
radial-gradient(at 16% 29%, hsla(240,97%,60%,1) 0px, transparent 50%);
animation: animatedgradient 10s ease infinite;
background-size: 200% 200%;
}
@keyframes animatedgradient {
0% {
background-position: 0% 25%;
}
25% {
background-position: 100% 50%;
}
50% {
background-position: 50% 75%;
}
75% {
background-position: 25% 25%;
}
100% {
background-position: 0% 25%;
}
}
