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

Jonas Arleth

Learn how to create an "ultra gradient" in Webflow. This cloneable is based on Fons Mans' Twitter thread (https://twitter.com/fonsmans/status/1569708218351247366). He wrote a tutorial for Figma and I tried to create it in Webflow without any imported shapes or images.

YouTube Tutorial: https://youtu.be/8ZHsLochLFA

Ultra Gradients in Webflow (Cloneable)

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)

Dhruv Sachdev

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

Web Bae

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

Moving Gradient Background

Em Design

Lovely people,

This demo can be used for your projects: Projects Page or Loading Page.

For any inquires: mo.jahanii@gmail.com

* I have not tested it on many devices but if you want to use it, make it responsive. It should be OK on Desktop and Mobile Devices.

EM Freebie Issue 2

Rowan Hartsuiker

Custom website design I did for this tool, an All-in-one AI platform to augment human ingenuity.

Visit live site at http://commerce.ai

Commerce.AI

Relume

To celebrate the release of Relume Library 2.0, we've created a version of the Libraries landing page for the community to clone and draw inspiration from. Enjoy!

Create your own Webflow component library:
-> [https://library.relume.io/libraries](https://library.relume.io/libraries)

Relume Libraries Cloneable

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

Kevin Haag

Not the most performant of effects, but it could be tweaked it into something cool probably. Also, it was a good excuse to celebrate the new backdrop-filters 🎉 (this won't work in Firefox.)

✅ Native Interactions
✅ Custom Code (just one line of CSS)

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

MM—015: Aurora Gradient

Luke Davies

Gradients.io

Halo Lab

Interior design can visually expand space, change your mood and make you feel at rest or on the contrary, more energetic. When you are surrounded by beauty, it changes your way of thinking. The interior design studio gives a helping hand to create a stylish and cozy home.

Liviu Avasiloiei

This website design was created as a proposal option for a client but it wasn't the chosen design direction. The design style reflects the idea of constant evolution in the field of bionics research. I wanted to explore it because I think there are nice visual motifs that connect to the world of science.

Bionics

Imtiaz Raqib

Hello Webflow fam 👋,

Inspired by the Webflow Community Hero Section, I present to you a fully cloneable blurry animated background gradient that can be used in your hero section or any other section of your liking.

The animation is 100% native with Webflow interactions and utilizies colored div blocks and CSS scaling. The animation was tinkered by inspecting the Webflow Community Section using the dev tools 😉

Let me know what y'all think.

Animated Blurry Gradient Background

To celebrate the release of Relume Library, we've created a version of the home page for the community to clone and draw inspiration from. Enjoy!

Get access to Relume Library
-> https://library.relume.io

Relume Library Cloneable

Egenix - Digital Services & Development Agency

Hello fellow Webflowers,

We have built a fresh freebie services overview page. All categories with associated references are dynamically loaded with Webflow collection items. - you can simply add new categories or associated references and remain a good user experience by enabling the progress bar indicator. 🤩 

The progress bar we created scrolls to the dynamic collection blocks, this is 'normally' not possible, because collections can't have anchor links. We resolved this with a nice hack by assigning an 'ID' to the collection classes 😄 thru an embed and then converting the progress bar links to anchor links so you can scroll back and forth thru all the collection items. 🤙

If you like this project and find it helpful please like ❤️ it so other Webflowers can see this project and use it on their next website 🙌

Progressbar - anchor links - Dynamic Collection

Brett Williams

Unlimited design for startups to enterprises.

Fun little native glowing crystal-ball hover interaction. Hover to seeee your futureeeeeee.

✅ Native Interactions
❌ Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

MM—021: Crystal Ball Button

Federico

Fully parametric, configurable animated gradients done in vanilla WebGl. Reacts to mouse position.

——
You can tweak the parameters keeping the data-test attribute and kill it when you find what you like simply by removing it.

Parameters are served through attributes. Everything is explained in the repo linked in the custom code /body section.

——
CHANGELOG
02/11/12 — fixed controls not disappearing when removing data-test

——
Quite random and can be done better, might make more tweaks in the future. Inspired by the recent @ webflow.com/skylartkitchen AE cloneable.

👀

Webgl Reactive Animated Gradient

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=

VbvmIh0o/WPQ9s5PslnmpJTfwuWrf5uT6PAQHQ6QP1Q=

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

VlWaVYeyTGhnqBlTBGvFxL4xZ68LP76wzFvPWcLyGw4=

aXYqHZ7oh9DTaBYvq/qFxDFbxP3biDzlN85J/BQ4RtI=

bKAcaThH+yCo188IQrLBVQm7ZVHiGXE+GIrnig1XATs=

dXtnG24ejPs2vQQEa6Q3SmBwuKH9lqgDjoJ3NlGh7SU=

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=

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=

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=

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=

pJfUbXSMy3I5/YgFlhkcdg6l873+JjkE05INAUxLmUI=

pJu6WGBlTFWiqPzNCkQSRb8W05i8Lzy2Nfh+m51MAZM=

pLIbUAyBVzklGHnVkB1mmXeFlr+mt/yEqhl2nYGyTl8=

pfdJ9RTlU4Mo+4hlyUI1AWFiBg/kpMXhksWhOudXh6c=

q8KpOi8pd1SLtcqa8Z+BiAC0TJHQNj0U+TIC68C+1d8=

qo89NZbme+e7+TR8W9q4ZzVpfBgm5f4sIK4lmlJJZ8k=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

qwBI7cEFi2p5uofmngMNq9hyeXBei5HjbZBPsE2jVNk=

s1IkcDWaLdG1fVzmrKfXCHT56fJwoMRLaOXYYJs0NVQ=

seCri7Zl3fom4rsiFngkgnae6iogDDnZ7SCzgk/lbj0=

Best Gradients Websites | Free Examples & Designs

Discover Gradients websites
built by the Webflow community

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

Discover Gradients 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 Gradients websites
built by the Webflow community

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