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

Learn how to build this and many other interactions on my YouTube Channel at https://www.youtube.com/watch?v=gSWQPaybNiI

Learn how to build a working CMS Pricing Calculator and other Javascript lessons on my Patreon at https://www.patreon.com/timothyricks

T.RICKS Glassmorphism

A labor of love finally completed! I've created a free website template for churches. It's my hope that this will help churches modernize their online experience and come back stronger than ever from COVID-19. This template features dynamic content for Sermons, Events, Staff, and Connect Groups and is ideal for single location churches.

Watch the tutorial at https://www.youtube.com/watch?v=_lgxY3LMR_Y

• Create landing pages in less than 3 minutes for anything
• Old events automatically removed the day after
• Homepage events section disappears when no events are present
• Add a new sermon, event, or connect group site-wide in seconds
• Reuse any page section across multiple pages (update once for all pages)
• Looks exactly the same on 5k screens as it does on Macbook Airs
• Thoroughly planned user experience and interactions
• Dummy proof to manage (from the Webflow Front-End Editor)
• Optimal site speed
• Homepage ministries section disappears when no content is set

Schapel Pro

Free Template for Churches

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/

Blur – Animated Accordions

🪗 Full-Height Funky Accordions 🪗

We build a cool parallax blur scrolling animation that is great to use in your portfolio. Especially as a web designer, you often make longer screenshots of your client projects, which can be showcased very well with this scrolling effect. I use a blurry background, which is basically the same image as in the foreground, but blurred by its filter and gives the whole design a great mood.
The project is as always free to clone in my Webflow Showcases!

Tutorial: https://youtu.be/5NNR5DExNGU

Webflow Scroll-Animation for your Website Portfolio

Blur scroll effect for long screenshots in your portfolio

Here is a simple scroll animation; the purpose is to indicate to the user the page is scrollable. This may seem like second nature to scroll web pages but surprisingly not always.

Scroll Indicator Animation

Live site: twotwo-official.com

Again, Everything is based on VW units such that it looks super responsive on larger devices.

Check another ecomm site based on VW: ujjo.webflow.io

Two Two Official

Two Two Official - eCommerce Site Rebuild

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is one of the concepts that was chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Artsnob

Here is a short tutorial to the popular effect of blurring elements scrolled behind the nav.

I hope you enjoy it :)

Tutorial - Blur effect behind navbar

Blur behind nav - Tutorial

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is the one concept that was not chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Future Pharmaceutical

This native slider uses the CMS data and thanks to the fantastic Finsweet library (link below) it is possible to have greater management, even of animations. For more information on how to use it, see their documentation.

The stars are generated with a simple custom code based on the rating in the CMS.

To make the vertical label fit (taken from the CMS) I used Fitty (link below)

https://cmsdocs.webflow.io/slider
https://github.com/rikschennink/fitty

👋

Finsweet CMS Slider

An extremely non-performant native IX2 animated blobby gradient background. Seriously, don't use this on your websites. 😘

Such Trendy

such-trendy

A small simple portfolio with a selection of projects from 2014 to 2022.

Floris van Driel | Amsterdam based Designer & Art Director

portfolio-site-fb976a

Add a shader gradient effect similar to Stripe's new website.

Stripe Gradient

stripe-gradient

Webflow University

Bring out your inner filmmaking skills and rack focus between focal planes using a scroll position interaction in Webflow. In this lesson, we'll shift focus between the background (the studio), Grimur (the middleground), and his coffee (the foreground).

Rack focus interaction

Cloneable rack focus interaction in Webflow

Fun little desktop reveal I made using some of Webflow's newly released features!

Background Blur Reveal

This is my personal website, my portfolio. I designed this website to reflect part of my creativity. 

Hero section: Spooker's eye is following the cursor. While hovering on a section title the eye sees it and it becomes sharp. The background color can be changed with a tool on the right which is a nod to graphic design. The background also has colors moving, what do they represent? 
The vibe of the website is a mix between modern graphic design trends and old school video game console interface.

The Intro shows my hobbies with a wall and draggable letters.

Each section is showcasing my projects in a custom way. Windows-like divs are draggable.

Vladimir Mabille

vladimirmab

Do you prefer to read about a product, or do you want to see it in action? 

It may sound cliché, but images do tell a thousand words! 

Presenting your product in context bridges the gap in communication, saves your customer time, and helps paint a more vivid picture of your 𝗽𝗿𝗼𝗱𝘂𝗰𝘁 and its 𝗯𝗲𝗻𝗲𝗳𝗶𝘁𝘀. 💃

I created this free webflow demo for a fictional eyewear company, to illustrate exactly that concept.

Feel free to clone this and use it as you like, like and comment if you enjoyed it! ✌️

Need Eyeglasses?

need-eyeglasses

It's freebie time again! 💙 

I created this fancy password page so that you don't have to. Also works on the default password page inside Webflow. Both versions included. 

Wanted to play around with the backdrop filter in Webflow which is now native in Beta since the NCC! 😍

Hit Like if you appreciate it and follow me for more freebies in the future! 💎 

Cheers!

Discover .css-73fekg{text-transform:capitalize;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}blur websites built by the Webflow community

Discover blur websites built by the Webflow community