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

Jonas Arleth

I found the effect on the iPhone 14 Pro (2022) site (the site is deleted by Apple every year if a new iPhone comes out.). 

Watch the Tutorial to see how I build the effect: https://youtu.be/w0tJnjrRTlg

Apple like Text Gradient Scroll Effect (iPhone 14 Pro Page)

Joseph Berry

WINNER: 
SOTD - HONORS - MOBILE EXCELENCE AWWARDS
WOTD - BEST UX - BEST UI - BEST INNOVATION CSS DESIGN AWARDS

BUY NOW:
https://www.awwwards.com/academy/course/create-award-winning-animation-and-interaction-design-in-webflow

Animation and Interaction is a fundamental part in creating engaging and exciting experiences. Learn the crucial techniques in creating advanced animations and interactions inside of Webflow.

In this course you will learn all of the techniques in building out complex animations and interactions. As we dig into the fundamentals of animation and interaction design we will explore creative ways to build out digital experiences. This course will cover both how to build out clean HTML and CSS whilst building out animations and interactions that are smooth and perform well. This course will give you all of the tools to recreate, re-ues and elevate your Webflow skills.

Create Award Winning Animation And Interaction Design In Webflow

Josh Jacobs

Was a little worried that I wasn't going to be able to achieve this effect; the left rail of photos moving with the slider, the text being yellow over the images... it all seemed impossible.

But, as I am constantly finding out, nothing is impossible in Webflow. Made purely with CSS, Interactions, and alot of messing about. Particularly proud of some of the smaller viewport accommodations.

Clone away, and let me know what you think in the comments, or if you're interested in knowing how I made this project come to life.

Strive, "Plaid Dress": https://dribbble.com/shots/6711696-Plaid-Dress

Dynamic Hero Slider! - Dribbble Series ft. Strive

My first cloneable in almost a year! Created in response to a Facebook post that seemed like a worthy challenge 💪

It was super tough to achieve, using a combination of dropdowns, position sticky, CSS Grid & some mix-blend-mode magic to power the colorful overlays. Mostly no-code, with just of 2 bits of JS: one to achieve the jump links (Webflow doesn't play nice with links inside dropdowns) and another set to reset scroll position when closing the accordions.

A few tips:
• Doesn't work well in Safari
• Need to add more jump links? You'll need to add more lines of JS in the page settings. 
• Additionally, jump links are linked to position: absolute elements within each dropdown, so you'll need to add new ones with new IDs to make it work

Enjoy, and let me know what you think!

Design: 
dribbble.com/shots/12209806-Blurr-Animation

Facebook post: facebook.com/100005276292047/videos/287781939881694/

🪗 Full-Height Funky Accordions 🪗

Web Bae

Moving Background Gradient with dark theme inspired by Webflow Community hero section

Moving Gradient Background

Niccolò Miranda

Amsterdam-based independent Designer & Developer with focus on Art Direction, Motion Design and Creative Development.

Miranda – Paper Portfolio

Matías Pitters

Intro animation based on the shot for Netguru by Pawel Kontek.
Visit Pawel's work here: bit.ly/2MZAfMW

Using the "damped sine wave" to accomplish the bouncy effect.

If you benefit from cloning the project, consider giving a Like ❤️ !

Intro Animation - Netguru eBook.

Master Flowmaker

Full Grid on Mouse Movement

Inspired by @marioecg

097 - 100 days of @webflow interactions

#97 Full Grid on Mouse Movement

Halo Lab

Gig Share is for those who want to share big ideas with the world. It provides secure file storage and sharing infrastructure. Sending large files safely, sharing content with coworkers or family, and fast switching between different tools is easy with Gig Share.

Gig Share

On this website for Investment Platform, you can explore and buy modern art. The company is aiming to attract young adults who want to invest in digital NFT art. Its goal is to make investing accessible globally and popular among people in their twenties.

AIG Investment

Pablo Stanley

A one-pager for an illustration collection from Blush called Dayflow. Feel free to copy, inspect, remix this page and make it your own!

If you want to create your own illustrations, you can use Blush https://blush.design/

All artwork by Pau Barbaro. Check out her illustration collection here:
https://blush.design/artists/pau-barbaro

Dayflow Illustration Landing Page

Bobby Rowe

Bobby Rowe is a resource for brands and agencies looking for creative production talent, and an asset for talent looking to work with brands and agencies. 

A lot of fun at lunch but extremely serious over e-mail.

Designed 🎨 by Kendall Gregory, instagram.com/kendallgregory
Developed 👾 in Webflow by Josh Jacobs, webflow.com/joshwork

Liviu Avasiloiei

Trying to improve my animations technics using the native interactions by creating fun character loops. :)

characterbyla

Inspired by Sania Saleh for Strategyzer
Rooftop's closest free alternative typeface: Arimo by Steve Matteson 

------------------------------------------------------------- 

Work at a design firm looking for a Webflow dev team for your next brand project? Let’s chat

🔷 https://calendly.com/bookmark-wf/webflow-chat

 -------------------------------------------------------------

001 - 100 Days of Webflow Interactions

Luke Davies

Gradients.io

Varant

Each button in our set of interactive buttons is designed with a clear purpose in mind: to invite and facilitate user clicks. At Enso, we believe in creating functional elements that add tangible value to the user experience, rather than simply focusing on aesthetics. Our buttons are intentionally designed to be visually appealing while also serving a clear and actionable purpose.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Our team at Enso specializes in transforming ideas into digital products and experiences. We excel in designing and developing websites, creating advanced software prototypes, and crafting UI/UX solutions for startups and enterprises. 

We offer a straightforward subscription model fixed-price with unlimited design requests, ensuring fast and effective service delivery.


● 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 - ensooo.com
● 𝗟𝗶𝗻𝗸𝗲𝗱𝗶𝗻 - https://www.linkedin.com/company/ensooo/
● 𝗧𝘄𝗶𝘁𝘁𝗲𝗿 - https://twitter.com/UixYugen
● 𝗘𝗺𝗮𝗶𝗹 - varant@ensooo.com

button-interactions-p1

Krishna RV

A simple one page site about me and my work. Experience innovative design with interesting interactions.

R.V.Krishna - Art Direction, Design & User Experience

Eli Shmerler

Time to take control of the colors... :)

Feel free to clone.

Follow my profile to get notified about new tutorials of cool Webflow tricks.

(inspired by Slava Fedosenko)

Before and After effect

1AbhVrUKoQuYcjIh58BsAAwiWSSeW5NlDpmCF+18bfE=

1vaRoS0QlFL+TEUDugDt/1KXdWvhj03Qb9u2ruorsNc=

BI8g38RjO9qSIoKsoKXAkzypF/jq0x6CSrMWEHlULbs=

CHiQfJJNufnbbHjt7tcZuD9wK6Bl5FwbOUHnSl3avqA=

Cncfm09rtvZcTizRCBKfpaRwWy/chrg3cYxyaii9fjA=

GsC+9Ht0eLqZ1Itv+xIUmOwqjOeAeB+SPvPSMDIDLIQ=

KtqtGmJAcb3wYXGo9fF+CejOVcQnOQ1CJJXG6emPyiw=

LVQMH5aS2Xt7rOUBVCdHQcS1kJ+x1s1Q6kalLh//OJ0=

N4nepjmrPeqzA/+0tgNI02CsWSts8ZMU8JD0XIWjlKs=

NWXdQI9nQn/NInK3619JskfpoNXp6hYrp4cTAwn751Q=

Oq+ukiCn32odJFJ+G60yDcN8k5FzjE4vBVLTUytArao=

QYI5+5bcxZUvvlVG4JTa2aUTsFRBdQQ57W0Ru7LvzVo=

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

VOzslvMzaTnCGxc9ChXSHQXrzoC/W3HKLJGPUflr1O8=

VbvmIh0o/WPQ9s5PslnmpJTfwuWrf5uT6PAQHQ6QP1Q=

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

VlWaVYeyTGhnqBlTBGvFxL4xZ68LP76wzFvPWcLyGw4=

Y1yFqiff7zTtWyv39dxg51J53EongWT+yf+IVB4Tk+4=

aXYqHZ7oh9DTaBYvq/qFxDFbxP3biDzlN85J/BQ4RtI=

bKAcaThH+yCo188IQrLBVQm7ZVHiGXE+GIrnig1XATs=

cejRwfDx7S4miJ/yWnK5XLOX5sCcm4MzNWwHr43Xmr8=

dXtnG24ejPs2vQQEa6Q3SmBwuKH9lqgDjoJ3NlGh7SU=

hZ4C5GJLbNKoAo1aBqi3P13wwynIGPGJMsgEcxmbl10=

oIkmI84/O3nodhAO/gAbs0zgY2IvPgpH6UlSycbHi/I=

vWLqV3Ov/sIqX+Ose2pF2s1IS8JnBBI9cV4HRbUYAj0=

yoRUQ6BPTNfb9ckyfDP8HMQ2EiauI9+xWB6ArYI2KpA=

z7lzpDYq5nfwdPMT+jWKpBj8QZv3acBNr4+vtQ9fUlE=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+A3n/FuKm2cue8/h6JGINWjAcvPWu4QXhNn6zdLt4qY=

+Jf7kV68EXy0dXjCJWMvcU8AqAhWvxQJQ8ApuoUao5M=

+a7/qrZM8KxgbzEYQFUjUCQFvpoxRKG5a2xE5bmb5cc=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

+kvpibpuTdxgl8JQqyDx0umcdj9lKWmdERb8e7YjNiM=

/eQKgrRe44npSpQHYd8zK6n8gfGm1C5etTvu+Yh+sYg=

/z5rny/vN8rnsI2gxYCgnqQOFiwY847T4QIeZ6w5I34=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0Nul+UtSIc54GNelS4NpriUgFSNdZp166nNDWm85UUw=

0rn3MntEyYdSc7Oqsq+m2aBE6Cf4FOXltGGYrRmIp98=

0w7oqcwyEoOXXe5iwf2QWWC4HfwLALNeKgZ2/fl2AvA=

0z+EonM/Ze0RUt4FnVPK9NO8zbPrdKWPIV/2nsroWAM=

1Kas5SxzFq1TyEEK/rwk9T2BTRF97IopQx0dxEZEiV4=

1yPpEBxQzs5EQ8FAvcACSinRq2S2J2069sPRZVRmmxE=

2CaaGcOYr2jQ1j/RYPgcdEKUMd2NimVbaW9Dhme2K7c=

2MKxBjxJFF+pjCgjnn13Zs/sMPqGAwz8IA8oMGKno2E=

2bQMcH11t5ZrdZDFAzWCq5D6s61DSuaFkYFRIDm7xwg=

4/ZRsjwjianDr7cuDz3MnxIPhU/0ThbMbuKl9sChCbo=

4ZJ7EGzGqv4xuN2dyPyGVzeXC3ZzxnWvJ6WajoEnM98=

4zIwhZkCZ+GlQOns3JIYBz0/OVfdZ3Y1uk/5+7mf+2A=

5FDeSfKIJLemkdT7BTuxj/qoLWYEBfG9UQBPghck3ZA=

5pIFK+PVeOj47PIVY1YpQZ0n1VhUv3AFhxF9FK3/5NU=

7o4zfLmqRkJAQ4SwI5ydPFJF2yiMCkRKSykA1RAlTCA=

7xZWAYfVqaEy7CXa1ckZo3xjvoaWoIOdhw+qc8M1IKQ=

8/gMxAfniT5Ur4ZddM6OlyOqzEHd3vpiPSYMpWKDFIA=

8gI6WmFvbDz8SMrbx8MzRmUMR9tV7xaCtop+UypyGe4=

8mjRvgjeEnrPXy8+PRfmTkymyy2TZZroyVA+UwoQP3Y=

8oMNOGWYYe/dsogfowL+vLrVdT2OWWyyHB1Y4XXFWGs=

9Lzv3HXsA+tV2fDclVY4TYl02XNXPEq7XGg6nPEUQy8=

9eOqbJYbX/lDgN3AFRVfp42Rv5kAcQjTVaGf4rmNFj8=

9q5U1E2jY0N4SeEkrtIJaTni2dqqoMZRcQjgTozZe6A=

AszpXx6GJ0b6pVs1NuWGFWPM95/uPAZXy/X6lrfHpKE=

BrycHj3Uif/E3/joPAJ/yfqiH0y7P8YmmP9i3XjnR94=

C/5LSec5a5dvUgJbQG1ErBFEP+Az0HHizao78wic5BI=

CJr1o47h/2JgTHmTYbMIIFVwzAGyCQiWq61QbzYoM54=

CY7M9UIqsstwHXkY2gh+1iwe+xn/L400EHoMCr5V2Kk=

CjOPUxQfd2e9T/jCfK5kLFZtS+YknIrp9TbZsxBJ3n4=

CtVQqNWd9j4J7FIu6gkZuXP04W2A9VIvRP0lO0vGg4o=

DDA8rh6x+Vk9i0kkz3t4QIfQkJdeAKrM3dRhKEK5Jfo=

DLUIwqZ4gqnkap2OBn2YO6Au3y4bHd/9pXWGUAEuMYM=

DV5SvculpCgU62iO9dqjdXDq2NZzcZV/98XKJeIodPc=

DZW4Lt9/4nTqMYcoG7AAN7TQCRwpJ94xFJ+gE1GO2AQ=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

EmL/07sZTmi9xV+epHzdYP8GGRzf/PzE1igH51TIYGQ=

FzFr7wq/kppsOiyGliRMNoqXuup16iPHp3gX70eNNYI=

GD4875nvSkNCIEZ4tBO3sEPOv41ioJhEq4HAMewXKys=

HBu/+WX81ck/QRL3bGpcKBo4Od+zywIYCgcrsX+ndQg=

I3K0nh5mmBeL02c/ir3Q1UigISY6ReBhiFbKsrZ3Ki0=

I6aCKEIKc6Arq7OqoqijPw7efTjUjYkQrD6nNhdEUwo=

IecZDrAiYHZ2FX54Q/INHQRe0ujkhGtEjFuvzZo7x0I=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

JSUE/tzFGqA8SW6UZelJxRWNmjDOVW6AacN+s8q2058=

JU2o5r6Xqq5rET5oe2krqsXUQA9IOYqUVMVbjoCZHsQ=

JXxUskpxyJf0HzDZZzk+rnqpDJoD/uHhmIBaeZ2rf2I=

KmttvwfoYQsBfGx+YR6WvNYQXoRwaQ+hKZS5+DHpXLk=

KwNdLm13JslISvQgWOQm9Zm7GDrqF3bhOoswENyOAxI=

LOBx6XjXdHGh1Mc2TWG0lUBfYWbMOp15iStJG887/pg=

M68XHgVRoF+CgWOuAgzziTucAtV7ElqMmEFJQp5m3as=

Mohr77Q7dxdMguKfm9Dp+4QZR4J21VTSH1maVgI3cvY=

NNmzAPr+W5fwYbhgYsNDbdlVTarI73Cry85ZiKK5Yjc=

NP6mAIrpTB9kRjtJnW3FmZTpNpH4UMQimwJqY9Sec+k=

NaOvW/FyxHGGW+okX5dXeUZcodQswSRaUy5pwYMQCY0=

ONGbaY8NwLZsAON1rFnvSZpSx/C2YgSvAaKP+Qs3sy0=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

QyOkXQQ0AOJ6N2ROFKTm8CNWMAZf7QJ8z6bIJPWCmzM=

RNrETXTx1goA+cNRwZ0oSg96+eaPh46yoTQAMDGgP9A=

RTjXBMHnjTqFdoDyXUO2AKPkqYypcAKcmM0zGDh4caY=

ReTHz5O++2bhIDWL5iofoqpgFh3DS7gFBY5lndMX0a4=

RsYysVV70gPw0I2C23r4QEqOqUzDtW7dKlNtEjNPevk=

S3UH97cX9/DCJeeuSb/1cxTJ7CCdGRdLv4pASFeUrlQ=

S4JZrvyHmR09Nyc3HtQfWtbrRptB8ZMYpLvZwp0IYbs=

TMNDqyje/vQDEHjCygHQ8322UQIoIl+Zt0FXFamqqBc=

W0wgK3N2DKRw7mHe/OXWveRF5zny0tvm+vG0KHiLp/Q=

WTt79TgVYusVFFZbbtgD6IjHuxJo+eazLMALSeHAOzI=

XCK6Rqs7dIOv2tov2l7Uo7u9d/nuhp5p/a3eamin0So=

YTgvz2H2yS7kYnVdz+7EJIUOPBCJhECNTPAhmUOoe68=

YjCaV4Enws6JX1sU23e5JEm9clTNGQDyASM7DAVMPC0=

Z30olfa0xzqfZItQIWZJue3oRzhkBA+nuCA8hcRdxRw=

ZUomupwLYSWXi1Bsc0Q5I4QQhz3JSOBZyYBYEjDJjuo=

aRkYfJM+J8QK/4ctRXmPW8fpZt96HgtI+Vt4w1TJqFw=

aTgdgTg3HuG2EnCKMUKWPS7IKzHa2A6MPD/HTC2OnDc=

avA1E8BxM4R5laHGefKBQAB7YDI2f8nr3HYF14FeS7A=

b6X6lpBwM7EYZVnspY2ECrAYLHMu3XZ55dWqCrZs9Uw=

bGEr/UdvFcFW14ci0vi3Lr6wv+5sFlh9fyUkQiM3mo8=

bY9CwBP5j4ofVD/Qc7fgKdh5N2p1yzfO+3TBmfufj+A=

bbY/aaRB2/MTTsUUnt1VcS9sp5pvQFIHbzyMxfj/tqc=

bsLlc2kcOlK5RWQ59v0AEAUf4ihEq1EqzVL0STw1ipU=

ca/pVHa3/6Sxei+4H7EgEWxytJZtjYaWd4gIcLS9BNk=

dHp4QfzRtLvnW6XpYp9LkZ/+UmkiRSJnCTDTHkJxhyg=

dZwrFziiqNuYnGDLDpHI1YhPjKifwSg45KCaURl8D2g=

dpoqr065e3BMPES3mHU0e3h1MrOMj8U8du01JYaBKBE=

duF0LtcI4NHhgMhDn/fViguERQqiXiREnt1uY6elxuE=

e+VmFrHp4Yr8GXYWjDQHdWz2PclHlzv9quqbIMU/Xu0=

e1nV4rbOeCZmCMR0wNVO3H5eLY3JXwHN/i4dhTtIwaY=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

eKZ9sLSo6+sicIvD6P1KSh2FCMctkVM3veR39Usebi0=

eYRhaR917Kl8W9yQ5U6MBqXj8vPkIthFhiNmuNeAN78=

eYmgBZ7+8Grb61FIjGTNd9D3G+r/jczTEkvC5rm19Tk=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

hZOt6V9BSR8/ICxKace2yYYtjEANx66oO8CcAi+1Vrk=

i4x5O82EXRgsybef/nEJVxKihaVpGHa7SSp2wNrcQSw=

i5RceAnwNYDnFUmn6Nr7tYoU2zgb6WZMXFAm/Ks3EJI=

ikvazkAbsV39GS+10Vmh7RjiO2z1ejdlgeoiLidNThs=

iyiyfmoKLG7KcFAH8fMkFZGer4wu8vHJodF4ieLhLsc=

jqaxU6xWfRQV8c/i/ERw2Q5XMqRF/AuvAYJPk3lfUI0=

kIgH5PTz00ebMB/LNtAxtuAwPP+gtXqr2a03x3/jkN0=

kaIOlI6Nq9Q/ie+EQ0pIStIilIP0OEzSTA39Jp+4KjQ=

klqOuvQQstebNaPM5b7XzMZQXSUHgx7vxxrP7mKa9Xs=

lMZRnBKelZARxKZKvcX8d8F82wzheem0P2QRsYidDWs=

m5RDDyanSzWuROZ/yabAXAiECjmS4Y7ptst7znwh00M=

mDRiTqVFjYXWAoMmTKvGYstVKq4e0nZ5Ckliw/B0aEo=

mdqrxKA5yNLUO1xy5DRK+BdrEEx0DaTbUqGALpHTFfo=

mhuZ5qlzsZNBNnxhKt6Wc54QgRBLQMlu+fjvrfdbasc=

mr25pqFgU5sjnQPrcAz4M3IDWfqYT8r2hMqgjZsP0ho=

mzBUjnJfzGbV7f3LWr3EYLx76n0je7vMK+HZL3inDZQ=

nFOc754ZZ04U18Bv+sEqPOETNu1j/RWm59lDmPoxhRE=

npgTGGOiir1cOU5nJAWNjJE4NZ9gAcPFaZfxrb0eMKQ=

oEth0GQmlQEb4LYJYa0d+c3HKD3ULkpBbWmsOKI9iAY=

oyHKipHL55IaFrhtCcLofSEw9vQ5cQD1k6vYR22rDl4=

p2Vh8R1nnPDbUmB2laIvAo+ftmfycxaj1wj+1VbZyLg=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

p97Dq+fIx/w3/EkGTzaK1w3GxAKb2UiB7DMgeXVqPaw=

Best Colour Websites | Free Examples & Designs

Discover Colour websites
built by the Webflow community

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

Discover Colour websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. .css-ac9ku6{color:#2E5CFF;font-weight:normal;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}.css-ac9ku6:hover{-webkit-text-decoration:underline;text-decoration:underline;}Looking for templates?

Discover Colour websites
built by the Webflow community

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