Implementing custom CSS into Webflow site

Desiign · February 13, 2018, 10:53am

Good day.

I made this topic two days ago:

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.

Desiign · February 14, 2018, 10:33am

Could anyone please help me out with this? Surely it’s not that hard to implement.

mistercreate · February 14, 2018, 3:38pm

Hi @Desiign,

Definitely a great question!

I was able to implement the custom code from CodePen by using a Stylus compiler: Online Stylus Compiler - BeautifyTools.com

First, copy the Stylus css from CodePen
Then, paste it into the compiler
Add the compiled CSS to a custom code area within Webflow
Lastly, give your body a class name of “aurora”

53%20AM645×602 41.7 KB

You can view the live Webflow site at the following: http://aurora-background.webflow.io/

And the following is the Webflow share link: https://preview.webflow.com/preview/aurora-background?preview=a199a7b71bd1d541427c630e5f960f23

Hopefully this was helpful, and definitely feel free to reach out if you have any questions.

Best regards,
Micah

Desiign · February 15, 2018, 3:11am

Hey @micahryanhtml, thanks so much for your help.

It works great with the original code from CodePen, however I made some changes to the code to make it only use two colors as opposed to a full rainbow cycle. You can paste this code into the Pen to see what I mean:

.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

I tried pasting this code into the compiler and then put the code into Webflow, but when I publish the site, the effect doesn’t play.

Here’s the published site’s link:
netweave.webflow.io

And here’s my public share link:
https://preview.webflow.com/preview/netweave?preview=097c746acd4f64329b4c253ada6c9e5a

Thanks again for all your help!

samliew · February 15, 2018, 3:45am

@Desiign You should share the link to the codepen pen.

Anyway @micahryanhtml, you can display compiled CSS from the codepen instead of using a third party tool.

Desiign · February 15, 2018, 4:12am

@samliew The CodePen link is from my previous topic which I linked in my original post above.

Anyway, here’s the link:

As mentioned, I made some adjustments to the CSS code, which can be found above.

samliew · February 15, 2018, 5:09am

What’s diameter diameter in your CSS? Shouldn’t it be some value?

mistercreate · February 15, 2018, 2:15pm

Oh, nice!

Thanks for the heads up, @samliew

mistercreate · February 15, 2018, 3:00pm

Hi @Desiign,

I was able to use the two colors that you mentioned, added them to the pen, then compiled the code (thanks for the tip, @samliew).

You can view the process in the following video:

Lastly, I added the updated compiled code to the previously provided links. You can view the results at the following URLs:

Webflow share link - https://preview.webflow.com/preview/aurora-background?preview=a199a7b71bd1d541427c630e5f960f23
Live site - http://aurora-background.webflow.io/

Hopefully this helps, and definitely feel free to let me know if you run into any bumps along the way.

Best regards,
Micah

Desiign · February 16, 2018, 7:48am

Thanks @micahryanhtml and @samliew for all the help thus far.

Unfortunately, in your live site, it seems it still cycles through many different colors of the rainbow, however the effect I’m looking for only cycles through two colors.

For a better understanding, please paste this code into the Pen:

.aurora
	background #1b1b1b
	position relative
	&:before,
	&:after
		content ''
		display block
		position absolute
		width 1px
		height 1px
		border-radius 100%
		opacity .40
		// 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

I have tried compiling the CSS in CodePen and then pasting the code into my site, but instead of two colors, it only shows one, as seen below:
netweave.webflow.io

In regards to your question @samliew, I’m not sure if there needs to be a value there. The effect works without any issues on CodePen without having to add any values for the diameter diameter

Any help is appreciated, and thanks again.

mistercreate · February 16, 2018, 12:28pm

@Desiign You can view the update at the following URLs:

Webflow share link - https://preview.webflow.com/preview/aurora-background?preview=a199a7b71bd1d541427c630e5f960f231
Live site - http://aurora-background.webflow.io/

Feel free to do the same: add your code to the Pen, compile the code from CodePen, and add to your project.

Hopefully this helps

Best regards

mistercreate · February 16, 2018, 10:46pm

Hey @Desiign,

Just checking in

Were you able to get what I provided working on your site?

Desiign · February 17, 2018, 3:18am

Hi @micahryanhtml,

Your live site seems to perfectly resemble the effect I’m looking for, however your latest preview link isn’t working anymore. I tried using the code in your previous preview link, but what I get is simply the blue color again.

Have a look here:
netweave.webflow.io

And here’s my preview link:
https://preview.webflow.com/preview/netweave?preview=dddcd70f08786bd1df87a486a032a15d

Thanks for all the help once again!

mistercreate · February 17, 2018, 3:24am

@Desiign Oh, I’m sorry.

Here’s the preview link: https://preview.webflow.com/preview/aurora-background?preview=a199a7b71bd1d541427c630e5f960f23

Feel free to let me know if you are still unable to access it.

Desiign · February 18, 2018, 3:02am

@micahryanhtml Alright I’m quite confused right now

I copied the exact same code into my site but for some reason it’s only using blue as opposed to both blue and pink.

Please do have a look and see if you can find out what’s wrong:
https://preview.webflow.com/preview/netweave?preview=dddcd70f08786bd1df87a486a032a15d

Thanks!

mistercreate · February 19, 2018, 10:50pm

@Desiign Hmm, that is very odd.

I’ve jumped back-and-forth between our projects (Preview, inspecting the code, etc.), and I’m not seeing any glaring issues.

It’s very odd that it would display so differently.

I’ll try to implement this CSS into a clean project to see if I have any issues and let you know.

Thanks for the heads up.

samliew · February 20, 2018, 2:28am

Aha, I see that you fixed the diameter issue.

Now all you need to do is to add one more style rule: z-index: 1; at the end of this

.aurora:before,
.aurora:after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  opacity: 0.4;
  z-index: 1;
}

Desiign · February 21, 2018, 2:56am

Hi @samliew, that just puts the color in-front of my text, as seen here:
netweave.webflow.io

Any ideas on why both colors aren’t showing on my site? I may test it on a new clean site soon.

Thanks for all the help thus far.

Desiign · March 1, 2018, 7:50am

Hi @micahryanhtml, I’ve been busy the past few days, so I couldn’t try it out. However, when I tried it out today, I still struggled to make it work.

Perhaps if I cloned your website it would work? Could you please make your website clone-able so I could try it out that way?

Cheers!

mistercreate · March 1, 2018, 3:03pm

Definitely, @Desiign!

You can find the clone-able site at the following URL: https://webflow.com/website/Aurora-Background

Feel free to let me know if you have any additional issues going forward.

Hopefully this helps

Best regards,
Micah

Topic		Replies	Views
How can I implement this into my header? Custom code	5	1949	February 12, 2018
Animated Gradient CSS General	26	11252	April 12, 2021
Codepen Custom Code help Custom code	6	1211	December 4, 2022
Any way I can achieve this blob effect using custom JavaScript? Custom code	11	8700	June 13, 2018
Custom CSS Text animation not working Custom code	2	1228	April 6, 2022

Implementing custom CSS into Webflow site

Related topics