Blur overlay for part of image

Design help General
1

Anyone know if there’s a way to blur part of image to create this kind of look?

07%20AM
07%20AM1030×790 466 KB

Thanks!
Jen

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I did this a while ago on a site. I just created a blurred version of the image in photoshop, put them over eachother in webflow and set the image to fixed.

Click the open in webflow button to see how.
https://webflow.com/website/Casey-Neistat

3

Thanks for the share! I wonder if there’s a way to do it with one version of the image file.

4

Hey, I see its and old post but maybe this helps people stumbling upon the question: you can use a backdrop-filter in custom code. so just apply sth like this at the end of the tag on your class:

.navbar {
backdrop-filter: blur(8px);
}

1 Like
5

Thanks!
You know, I’ve been using webflow for years and haven’t added custom code for CSS. Do you need to add anything else or could I just drop in what you have there?

6

@trystudio

Please take a look at this:
https://forumhelp-60eb00.webflow.io/

https://preview.webflow.com/preview/forumhelp-60eb00?utm_medium=preview_link&utm_source=designer&utm_content=forumhelp-60eb00&preview=95032efd93b573206fbfafc5c8f78969&mode=preview

image
image1914×977 577 KB

1 Like
7

Ah you also need to put your CSS inside a tag, then it should work! And to apply your code to an element, give inside the designer in webflow your element the same class as in the custom code.

So on your example I would make an empty div, call it blur-layer or sth, make it half the page size and put the custom code in.