Discover the best cool-effects websites created by professional designers. Get inspired and start planning your perfect cool-effects web design today!

Eli Shmerler

Here’s an easy way to mask video in text.
No custom code required!
I’ve created this with a SVG file and added interaction to zoom in when scrolling.

Feel free to clone and use in your project.

--> Follow my profile for cool projects coming soon

Text Masked Video Scroll Animation

Shais Ahmad

Please enjoy this super cool, fully responsive side menu animation 🔥

It only required a bit of custom code and the rest is Webflow!

Instructions:
1. Copy the "navbar_component"
2. Copy the code in the before body tag on the homepage
3. DONE!

Feel free to ask any questions below :)

We hope this is useful! Enjoy!

[Cloneable] Side Menu Animation

Please enjoy this super simple, fully responsive Webflow cloneable that instantly calculates the read time of some text/a blog post 🔥

It only required a bit of custom code and the rest is Webflow!

There's also some really cool load animations, interactions as well as a light/dark mode feature!

Feel free to ask any questions below :)

We hope this is useful! Enjoy!

[Cloneable] Read Time Calculator

Charles

The Pixel Distortion Effect.

Inspired by Infinite Bad Guy Website (which is no longer active)

You can clone and change the following attribute inside the canvasContainer:
data-grid (default value: 34), //generate how many grid
data-mouse (default value: 0.25), //mouse radius affecting the distortion
data-strength (default value: 1), //higher = more parallax and distorted.
data-relaxation (default value: .9), //lower = faster pixel re-sorting
data-aspectRatio (default value: 1.77), //change Aspect Ratio according to your image size. (default 1920x1080)

It is recommended to use landscape images,
To calculate aspect ratio, you can do (image pixel width / image pixel  height)

Have fun messing around! ✌️

NB. There's also native text animation if you wanna try to play around with that one too.

Pixel Distortion Effect

Dhruv Sachdev

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

Azwedo Templates

3D Hero Cool Animation made by azwedo.com & wedoflow.com

3D Hero Animation - Azwedo

Super excited to share with you guys this really cool animated tab bar with a shooter effect 😁

Based on Cuberto Design: https://dribbble.com/shots/14723171-Animated-Tabbar

Can't wait for you guys to include this in your projects!

Made using purely Webflow's native interactions (no custom code).

Built with 💪 by Shais Ahmad from Pristine Digital.

[Cloneable] Animated Tab Bar With Shooter Effect

Asad Digital

Hey guys! Today I want to present you a new cloneable! This time I created a matt glass effect using inner shadows and layer blur in Webflow. Feel free to clone it and use in your projects. Cheers!

Matt Glass Effect

Zajno Web Design & Development Studio

Motion is a website that showcases the power of UI/UX animation in conveying the mood and character of a brand.

The website teaches you how to bring ideas to life through motion design.
With its innovative use of animation, Motion sets a new standard for website design and user experience, providing users with resources to gain and improve a new set of skills in motion design.

Motion

Ali Tariq

Wanted to quickly play around with interactions using soothing color palettes and shapes. Apparently, this style of effect--referred to as the Aurora effect or a type of glassmorphism--is going to be more commonly seen this year.

Check out this video to learn more about Aurora UI and how visual interest plays such an important role in creating effective websites:

https://www.youtube.com/watch?v=0_MDRXWLlJ8

Feel free to clone and adjust away!

Soothing auroramorphic color effect

‪elyakim goldfus‬‏

This button has a clear guided toward different page by the arrow icon: communicates action without words it's better and faster.

Visual enhance engagement: hovering arrows add interactivity making users more likely to click. 

Language Barriers: Icons are universally understood, ensure you use global understanding like arrows.

Intuitive Arrow Hover Effect Button (Button 7)

Enhance emotional connection with a personal and more human (maybe even funny) touch, connecting on a deeper level.‍Making the experience more involved with turning a simple action into an engaging journey.With hearts flying out you create a sense of joy and satisfaction, and also enhance the overall user experience.

Modern & Futuristic Hover Animation (Button 10)

Harshit Agrawal

Hiii guys , here is a testimonial Concept ,
Clone it and make it yours ,

You can change angles from transformations if you want , 
Clone it and make it yours

Follow me for more stuff 
Contact me : kingfactory1234@gmail.com

testimonial-concept

Sami Rehman

Mobile Devices | Video animation | Charts 

Custom Tabs Animation

Webflowtips

✔ Simple custom code

Sign up for the lesson: https://www.webflowtips.com/b/how-to-add-a-shine-effect-to-an-image

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Shine Card Effect

Here is a hero and nav animation based on @bentenwoodring’s design. 

✔ No custom code
✔ Client First v1

Sign up for the lesson: http://www.webflowtips.com/b/how-to-create-a-hero-and-nav

Hero and Nav #1

Memberstack

Make some cool confetti fly when someone clicks something using this simple attribute-based solution!

Confetti On Click

Design Credits- Tayler Odea
Thanks for giving me the opportunity to develop this beautiful site.

Main Features of Website-
1. Scroll Animations
2. Subtle Hover and Click Interactions
3. Horizontal Scrollable CMS
4. Cool Webflow Animations

Feel free to pinch me for your beautiful project at kingfactory1234@gmail.com

Thanks

Lease Leads | SaaS Wesbite | Made in Webflow

102976941

1038319252

gpt-4.1-nano

1070795817

1122423150

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1138017326

claude-sonnet-4-5

1186914386

1274323923

1316201488

1316201489

140432223

1462086697

1506258256

1567550242

1592612642

1631162196

1726628865

1733785607

173927913

1771795565

1863160016

1905118106

1975670756

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2032141491

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2493307210

2546957535

2789269995

285302288

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3022611874

3023147062

3026881092

3070246498

307653616

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3201643127

3243842104

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

gpt-4.1-mini

3590523401

3591394191

3669004489

3672367630

3737116140

3801251705

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

3934148661

3941255684

3951600357

3956476210

3960693283

3972857978

4063605209

4092855684

4103643638

4144203485

4178901499

4195171643

4206156914

451433404

489463363

504462606

536101258

540515386

612788821

622649767

622649768

655421556

657188092

660615456

665836192

737109165

772001133

817414265

846847440

879597835

882147072

911514507

938734410

968427424

1013057706

1045828939

104959118

1049811722

1087856901

1088396327

1106275794

1108325183

1120744071

1131151533

1140906369

1147278396

1157311889

1157563538

1178238107

1178621510

1193740135

1197475705

1216878544

1227154495

Best Cool Effects Websites | Free Examples & Designs

Discover Cool effects websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Cool effects websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Cool effects websites
built by the Webflow community