Tublelight effect on text?

Design help Animations & Interactions
1

Can anyone tell me step by stephow to create this tubelight effect on text in webflow thats shown in this link?

2

Text Shadow will take care of that for you!

3

HI @Jeet_Shah you can achieve blink effect of broken neon within animation of opacity, filter brightness, filter blur and assign this animation to eg. page load. It will be a bit more time consuming (clicking hell) than writing own custom CSS animation or using code from CodePen .

Hope this will solve your request

1 Like
5

@Jeet_Shah

You have all the code you need to do this. You simply need to add it to your project, and assign the proper classes.

  1. Add HTML Embed Code Editor (Embed Component) to your page.
  2. Add beginning + ending < style > < /style > tags
  3. Add your style code inside the style tags:

.insertclasshere {
font-family: yours;
color: yours;
settings: yours;
}

@keyframes flicker {
0% {
filter: blur(5px) brightness(1);
}
3% {
filter: blur(5px) brightness(0);
}
6% {
filter: blur(5px) brightness(0);
}
7% {
filter: blur(5px) brightness(1);
}
8% {
filter: blur(5px) brightness(0);
}
9% {
filter: blur(5px) brightness(1);
}
10% {
filter: blur(5px) brightness(0);
}
20% {
filter: blur(5px) brightness(1);
}
50% {
filter: blur(5px) brightness(1);
}
99% {
filter: blur(5px) brightness(0);
}
100% {
filter: blur(5px) brightness(1);
}
}

  1. Add text to your page and give it the same class from above (insertclasshere).
  2. Save + Publish
  3. View published site

If it’s still not working after you do this, please paste your share link so we can help further.