This demo showcases how to use CSS clip-path to create unique hover effects that reveal the same image in interesting ways. By applying clip-path animations and manipulating CSS filter properties or transforming the image, a variety of effects can be achieved. 

Reference from the beautiful work at Codrops, article: https://github.com/codrops/DoubleImageHoverEffects

10 Image Hover Effects

Bring beautiful CSS gradients to #Webflow in just one click! Comes with built-in syntax checking.

Save yourself some serious time. Try pasting CSS code directly from Figma or libraries like https://cssgradient.io or https://webgradients.com 

Generate Gradients from CSS

Convert values from Figma, and paste into your site for precise drop shadows every time.

Supports pasting CSS directly from tools like Figma. A huge time saver for me and entirely removes the guess work 👌

Generate global combo classes from multiple layered shadows.

Layers in shadows give design depth and dimension. 

Another use case: Generate your shadows on https://shadows.brumm.af, then 1-click import by pasting the CSS.


Box Shadows in Webflow

10 Typography Interactions

A slick button effect that features a rotating gradient border. It can be a great way to highlight your call to action.

You can configure the text, border radius, colour, speed and other settings!

Inspired by the innovative work at https://wope.com

Glowing Button with Rotating Border

A sweet hover effect that can span across multiple cards at the same time! 

Highlight the (simulated) border of the card and the neighbouring cards.

Custom code is used to pass the cursor position over to the surrounding cards. Inspired by https://linear.app

Glowing Cards on Hover

Make your website stand out with 180 ready-to-use gradients. 

This cloneable includes gradients with different styles — including angular, radial directions and gradients with multiple colours (up to 5). 

Creating gradients can be tedious, especially when trying multiple styles. 

Each global class has been named systematically so you can reuse it throughout any project, for example: "gradient-night-fade".

Adapted for Webflow from https://webgradients.com

180 Beautiful Gradients

Here are 20 Plug & Play CSS-only link hover effects for your next project! 

Subtle line animations can be a simple way to enhance your site experience through delightful micro-interactions.

Inspired and adapted for Webflow from: https://github.com/codrops/LineHoverStyles

*includes 21 effects, but 20 sounds cleaner.

20 Line Hover Animations

This cloneable features a wacky & playful button that fires emojis on click. I'm a sucker for these effects!

I planned to use Webflow interactions but realised that physics, randomness, and subtle details could be better achieved using a library. Reference: https://github.com/JoshuaKGoldberg/emojisplosion

Emoji Button

Three.JS is used to generate an interactive twisting sphere. You can click and drag anywhere to rotate it.

Playing with settings, especially "phase", will produce interesting (colourful) results!

Inspired by https://github.com/codrops/WebGLBlobs

Interactive 3D Sphere

This infinite marquee displays live crypto token data.

I've used the CoinGecko API for pricing information and reverse-engineered token logos from a popular exchange. You can add further tokens simply by passing them to the fetch URL in my code.

The loop also pauses on hover. Inspired by https://auros.global

Live Crypto Price Ticker

I loved the Solana landing page and couldn't resist rebuilding it in Webflow. I've also layered a few subtle effects on top.

Solana [Rebuild]

This is a fun interaction with an image trailing effect. The idea is to follow the mouse and show a trail of images.

This effect uses vanilla JavaScript to paint images when hovering over links within a canvas element.

Image Trailing Effect

I loved the dancing light like effect from: https://www.ribbon.finance, and curiosity made me rebuild it.

I've used CSS animations for the lights, which will animate vertically on smaller screens.

Racing Lights Effect

This simple section with a 3-D cube can be customised with images or videos, making for an interesting features section. Feel free to stack effects on top of this!

The 3-D cube rotation is achieved through Webflow interactions and transforms.

3-D Cube for Features

A full-screen parallax interaction that reveals different sections on scroll.  It also includes a subtle blurring effect. 

This works well for a slick portfolio section like https://www.dariaizbash.com, which fully inspired this effect!

Fullscreen Parallax Interaction

A live, drawing canvas where you can influence the pixels. 

Interactivity can make visitors feel engaged in a fun way. I used sketch.js for the drawing canvas. Use your cursor or touch to draw right on the screen.

David's portfolio - https://www.davidfiz.com was one of the most pleasant landing pages I've seen, and I wanted to see if I could rebuild it with a touch of design. I have layered lots of interactions on top. Sketch.js is used for the drawing effect.

Interactive Sketch Portfolio

An automatic timezone clock for cities around the world 🌍

Show the current local time for your city. It keeps itself up to date every 60 seconds. I've used CSS to add a blinking effect.

How it works:
It uses data attributes to define the timezone. I've written code to calculate and display the local time of your city. There are separate colours for "Open", "Evening", and "Closed" office hours. These can be styled through their respective classes.

How to use:
1) Find your timezone: https://timezonedb.com/time-zones

2) The "Location Row" element contains a single data-timezone attribute. Change the value to your timezone. Everything else will auto-update :)

You can change the opening/ closing hours & messages in custom code. The design was inspired by https://practice.inc

Dhruv Sachdev

Skills