Webflow Code Snippets

I like to add custom CSS and JavaScript to most of my Webflow projects, and often use the same code snippets across projects. I created this resource for myself so I don't have to grab code from one project and move it to the next, over and over again.

You can add custom code to an entire Webflow project in Project Settings → Custom Code or to a particular page in that page's settings.

Styles (CSS) go inside the <head> tag, wrapped by <style></style>.
Functions (JavaScript) go before the </body> tag, wrapped by <script></script>.

Below are snippets that I use often. I will be adding to this over time.

Hyperlink Hover

Hyperlink text highlights on hover with a lighter hue of the link color.

.highlight-link {
  text-decoration: none;
  color: #FF4500;
  padding: 1px 0 0 0;
  box-shadow: inset 0 -2px 0 #FF4500;
  background: 0 0;
  transition: box-shadow .2s;
}

.highlight-link:hover {
   box-shadow: inset 0 -1.1em 0 #FF9873;
}

https://codepen.io/danjmeehan/pen/KKpgYMO

<aside> 💡 Tip: Use the Adobe color wheel to find complementary colors for the highlight effect.

</aside>

Color wheel, a color palette generator | Adobe Color

Image caption (CMS)

Change the default style of the caption text under an image in a CMS collection by targeting it directly. (This is a case where you want to add the code in the Project Settings so it works on all pages.)

figcaption {
  color: #5d5d5d;
}