40 Unique Gradients

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

A fully cloneable animated blurry gradient background that can be used on your hero section, or other sections of your site. Helps add a layer of dynamic elements to your Webflow site. This is a 100% native solution with Webflow interactions and utilizes colored div blocks with CSS scaling.

A fun example of how to utilize native div shapes to create ultra gradients in Webflow. In this example the author creates unique gradients via Webflow by creating colored blobs and utilizing a number of different effects to create a gradient style background for your Webflow site. This utilizes a combination of border radius, 2d & 3d transforms and other effects to allow you to create gradients without 3rd party images or CSS gradient classes. Add in native Webflow interactions and you can build Stripe like animated gradients in no time.

A text gradient scroll effect that was similar to the one used on Apple's website. This text scroll effect showcases a block of text, which has a gradient effect applied to it. As the user scrolls down the bottom portion of the text is visible and as the user scrolls down further the entire text is visible, scrolling down further on the page the text then fades out. This effect does not require any HTML embed or custom code and utilizes Webflow's native interactions. This interaction utilizes the element trigger and while scrolling into view to create the effect. This interaction works by changing the opacity and moving an object over the text.

A fun crystal ball hover styled button for Webflow. This was designed entirely with native Webflow interactions and does not use any type of custom code.

A CSS technique to create animated gradient text animations in Webflow. This allows you to add extra emphasis and design to your text headlines or any text on your Webflow site. Via a custom CSS found within the HTML embed you can create this animated gradient text effect.

A subtle, yet clean gradient moving background interaction created for Webflow. This cloneable was built with only Webflow native interactions and does not require any additional code or HTML embeds. The effect was created by adding 4 different circle gradients to a gradient wrapper. The moving gradients uses Webflow interactions page load trigger and manipulates the scale of each item over a timeframe. Essentially each item grows and contracts at different intervals creating the appearance of a moving gradient background that isn't overwhelming.

Here's a way to add a nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.

A unique slider pricing calculator that updates the pricing table based on the slider options in Webflow. This is a great way to customize your pricing page tailored to the users unique features that dictate your pricing for your Webflow site and service.

Looking to easily add buttons to your Webflow site? Here are 16 different button designs with prebuilt hover state interactions.

Here's a dynamic pricing table that updates the pricing and currency symbols based on the selected currency in Webflow. A great way to show different pricing based on the currency selection of your users.

Add a monthly and yearly annual toggle pricing page to your Webflow site. This predesigned pricing table is built with the relevant toggle interactions to add an annual and monthly pricing table to your Webflow project.

Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.

Fourteen different testimonial components perfect for your Webflow site. These modern and well designed testimonials were created to help you add a testimonial section to your site quickly. The first variation has testimonials featured in an off centered design, the second variation showcases a simple 3 design with a primary quote and user avatar. The third variation is a large slider perfect to include a larger testimonial section to your site. Other variations included branded colored cards in a slider, a picture of the person with their company logo over their face, a large centered slider, a twitter card style, a video testimonial, tab testimonials and many other variations. This is a perfect cloneable if you wanted to add simple or complex designed testimonials to your site.

Eight unique Webflow preloader animations that can be easily added to your Webflow projects.

A modern and yet sophisticated multi-step quote request form for Webflow. This multi step form features a status indicator for which step you are currently in with the form. The form was created using Webflow forms and embedding various native Webflow sliders within the Webflow form. This method does NOT require any extra custom code or HTML embeds to work properly and is a perfect starting point for any multi-step form. The form utilizes checkboxes for large options on the second portion of the form, there are also custom designed radio buttons, and a final confirmation page to submit the form. Overall this is an excellent cloneable if you plan on adding multi-step forms, contact forms or questionairre's/onboarding pages for your Webflow site.