Implementing Custom CSS Into Webflow Site - Custom Code - Forum

Home » Add Custom Css Webflow » Implementing Custom CSS Into Webflow Site - Custom Code - Forum

Maybe your like

Good day.

I made this topic two days ago:

How can I implement this into my header? Custom code
Good day. I have yet another question about how I can implement a stunning effect into the header of my website. I found the following on CodePen: And I was wondering how I can implement this to be the background of my Hero Section, which is 100vh in height and 100% in width. I’d only like to implement the colors, and not the text. Furthermore, I’d also like to know how I can choose which colors it cycles through, and what the background color is. Any help is appreciated.

And basically it’s about how I can implement custom code from a Pen I found on CodePen into my Webflow site. I was able to get it working on Webflow through custom code to a certain degree, but it still wasn’t quite like what the preview on CodePen was showing.

I have made some adjustments to the code on that Pen, and have come up with this CSS:

// *** Magic starts HERE diameter = 35vmax .aurora background #1b1b1b position relative &:before, &:after content '' display block position absolute width 1px height 1px border-radius 100% opacity .30 // transform rotate(55deg) &:before box-shadow 0 0 diameter diameter #e82c72 animation: hue 10s 0s linear infinite, move1 20s 0s linear infinite &:after box-shadow 0 0 diameter diameter #31c5f4 animation: hue 10s 0s linear infinite, move2 20s 0s linear infinite @keyframes move1 0% top 0vh left 50vw 25% left 0vw 50% top 100vh 75% left 100vw 100% top 0vh left 50vw @keyframes move2 0% top 50vh left 100vw 25% top 100vh 50% left 0vw 75% top 0vh 100% top 50vh left 100vw

Now I’d like to know how I can implement this into Webflow with it working the exact same as it does on CodePen.

Any help is appreciated.

Tag » Add Custom Css Webflow