Webflow Code Snippets

Automatically scroll a user to the top of page on a tab change on your Webflow site. A simple Javascript code snippet that allows for you to scroll users to the top of your site based on your selected class.

Add a back to previous page button to your Webflow site with this simple Javascript code snippet. When a user clicks on the button they'll be returned to the previous page they were visiting.

Add a Vimeo video as a background video on your Webflow site using this custom CSS code. If you've wanted to add a Vimeo video as a background video you'll see that it's not possible natively in Webflow. This CSS allows you to add a Vimeo background video to your Webflow site.

Add accessibility features to your Webflow site by allowing to skip links with the keyboard only. Skip links allows keyboard navigation or screen readers to jump past the site navigation quickly. This allows for better accessibility for your Webflow sites.

Change the default native Webflow lightbox background color with this custom CSS code snippet.

Create a backdrop blur on your Webflow site using only CSS. This allows you to utilize CSS to add a backdrop blur to your Webflow site rather than using Webflow's native blur styling.

When you over over a child class the other children's opacity is set to 10% using CSS. An easy way to utilize CSS vs Interactions to control children elements.

Track the number of times a user logins or logs out of their Webflow Memberstack account page. This script will allow you to update a Member field of your choosing based on the number of times they have logged into their account.

A technique to stop by scrolling on click in Webflow via a small Javascript snippet. This is perfect for modal popups, navigation dropdowns and other overlays that should prevent the body from scrolling on opening.

A fun unique way of adding a random sticker to your Webflow site on click.

An easy way to utilize CSS for Logo marquees and other sections in your Webflow site. An easier way to create an infinite looping marquee on your Webflow site than creating them manually with Webflow interactions.

Utilize buttons to move between cards within an overflow: scroll wrapper to a specified card via each button in Webflow. This uses a simple JS code to allow seamless transitions between various cards of your choosing using an overflowed wrapper.

Customize the shape of Webflow's native list item for your Webflow site with this custom CSS solution. Want a different shape than Webflow's native circle list item shape? With this method you can easily update the list item shape.

Combine the last two words of your Webflow paragraph with a nonbreaking space via this paragraph runt fix. Add this Javascript code to your Webflow site to fix the paragraph runt issues with Webflow's native paragraph element.

Create a custom underline offset for your Webflow site using custom CSS. This is an easy way to add a unique style underline to your Webflow site designs, we recommend adding this to your global stylesheet.

Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.

Add dynamic interactive Webflow form elements with this Anime.js code snippet.

A simple way to dynamically update the browsers page title on tab change in Webflow. A great way to add a dynamic element and user friendly method of updating page title on native Webflow tab change.

This simple CSS code snippet allows you to fade items that are not currently hovered on your Webflow site. This is perfect for navbars or other elements that you want to emphasize the hover state on without building unique hover states or using interactions.

The ability to hide and show elements on your Webflow site based on if a user has reduced motion activated in their operating system. Adding this Javascript code helps with accessibility by hiding and showing elements based on the users predefined OS accessibility settings.

This allows you to utilize users OS preferences for reduced motion on anchors in Webflow. Adding this Javascript code snippet to your page settings helps the accessibility of your Webflow site based on your users preferences.

Automatically truncate text that goes beyond a line on your Webflow site with this simple CSS script. This helps create uniformed design on your site by truncating text with ellipsis if they go beyond a single line.

A method to pass the referring domain/URL as a hidden field in a form in Webflow. This is perfect to know who referred the person submitted the form, or a way to display the referring domain on the page on your Webflow site.

Automatically pause or reset a Vimeo video on modal close in Webflow via this helpful Javascript code. This prevents Vimeo videos to continue to play if they happen to be in a modal on your Webflow site.

Calculate the width of a div using percentages from two numbers in a collection CMS list in Webflow.