Kevin Powell - Community•10mo ago

Put a blur

I want realise this effect

9 Replies

Pat66OP•10mo ago

this my work

Pat66OP•10mo ago

Zoë•10mo ago

That blur is a part of the photo

Pat66OP•10mo ago

my code :

 position: absolute;
        width: 300px;
        height: 100%;
        top: 0;
        right: 0;
        background-color: #ababab;
        filter:blur(15px);

 position: absolute;
        width: 300px;
        height: 100%;
        top: 0;
        right: 0;
        background-color: #ababab;
        filter:blur(15px);

if I put the higher value on filter is worst when I put a short value I have this can I have some idea to solve this ?

b1mind•10mo ago

Give it a lower opacity on the color or directly on it?

Tok124 (CSS Nerd)•10mo ago

use backdrop-filter instead of filter and it will blur the content behind this element. And yeah... Either remove the background-color or lower the opacity

MarkBoots•10mo ago

A layer on top with a linear gradient from transparent to a slightly opaque grey and a backdrop filter blur might work here (can not provide example, am on phone)

Zoë•10mo ago

No matter what you do to the grey part it's going to look out of place because it's not incorporated into the photo. The source photo doesn't just have the blurry pillar but going from left to right it gradually becomes unfocussed. For something like this you either need to photoshop the photo or find a photo that matches what you're after or take a photo that matches what you're after

Pat66OP•10mo ago

thanks everyone

Gaming

Programming

Put a blur