Discover the best gradient websites created by professional designers. Get inspired and start planning your perfect gradient 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)

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)

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

🏆 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

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

Moving Gradient Background

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

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

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

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

Unlimited design for startups to enterprises.

Designjoy

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

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

Glow Cards

Glowing Cards on Hover

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.

Discover gradient websites built by the Webflow community

Discover gradient websites built by the Webflow community