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

Hey everyone ✌️ I sold this project in December 2021. Check it out at goodbooks.io!

I'm working on himalayas.app and untitledui.com

Follow me on Twitter for updates: twitter.com/jordanphughes

–––

📚 Good Books is a curated collection of book recommendations from some of the most successful, influential and interesting people around the world.

This project started about 6-months ago when I started to keep track of all the books that I wanted to read and who recommended them. I then got (a little) obsessed with the project and ended up accumulating over 15,000 book recommendations from about 1,250 people...

I built Good Books to share these book recommendations with the world, organising them into simple categories and industries so it's easy to find your next read.

Cheers 🙂

Good Books

Good Books 📚

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

Ultra Gradients in Webflow (Cloneable)

🏆 Awwwards Honorable Mention
🏆 Awwwards Mobile Excellence
🔗 awwwards.com/sites/monograph-communications

This site features a contrast typography design with the sans-serif (Roboto) representing the corporate professional side of the business, and the serif (Zangezi designed by Daria Petrova) representing an appreciation for the history of the written word.

The website features a restrained typography and linework-based design, which floats over these beautiful colour backgrounds. 

The entire site is designed using webfonts, SVGs, and linework so the website loads fast. The BG images are the only large files, so I used Webflow's interaction features to make the website wait until the user's browser has loaded the entire background image, then it slowly fades in. This is great because the user never has to see the image loading if they have a slow connection.

Check out my case study here: garycolwell.net/monograph

Monograph Communications

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 Gradients

180 Beautiful Gradients

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 Gradient Text Scroll Effect

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

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

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

Moving Gradient Background

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

Gradients.io

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

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.

This is my design portfolio. Using cool animations with gradients and transitions, I was able to create an immersive website with my own style.

FRANS

Frans Hulet Portfolio

Unlimited design for startups to enterprises.

Designjoy

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.

T-Bionics

t-bionics

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

Aurora Gradient

MM—015: Aurora Gradient

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

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 🙌

Discover gradients websites built by the Webflow community

Discover gradients websites built by the Webflow community