Streaming live at 10am (PST)

Implementing custom CSS into Webflow site


#1

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.


#2

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


#3

Hi @Desiign,

Definitely a great question!

I was able to implement the custom code from CodePen by using a Stylus compiler: http://beautifytools.com/stylus-compiler.php

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

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. :blush:

Best regards,
Micah :nerd_face:


#4

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!


#5

@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.


#6

@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.


#7

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


#8

Oh, nice!

Thanks for the heads up, @samliew :blush:


#9

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:

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

Best regards,
Micah :nerd_face:


#10

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.


#11

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

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 :blush:

Best regards


#12

Hey @Desiign,

Just checking in :blush:

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


#13

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! :slight_smile:


#14

@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.


#15

@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!