Backdrop-filter doesn`t work
I am trying to build a login/register UI and i want to use the backdrop-filter to blur some background ( just expirementing). Here is the code in code pen https://codepen.io/nikas19/pen/wvVojor.
The backdrop-filter doesn`t work.
74 Replies
seems to be working to me
The problem is your background is just 1 solid color, so the blurred version of that looks exactly the same as the non blurred version.
Another problem is that this: background: linear-gradient(rgba(255, 255, 255, 0.1)); isn't a valid background I think. You have a gradient with just 1 color?
So i have to provide an rgba value instead of a solid color?
does it work without any changes?
i saw it from a youtube tutorial, and it worked just fine. I dont know
if that is the expected result, yes. i didnt change anything.
You can indeed have one colour stop if it has transparency like this or if you use the 0s after but you need both “0”s
If you’re in safari , switch the order in the css so that the prefixed backdrop filter comes after background and before non-prefixed backdrop filter
this last part should be handled by an auto-prefixer
I want to have the glass effect.
tried this , didnt do anything
Maybe a problem of CSS version? i dont know.
what exactly isn't working?
can you show it?
thats the result
ok, so?
you can't blur a flat color
i want the container that wraps the form to be blured
set a background color of
rgba(255, 255, 255, 0.3)The background color you see is from the container behind
my answer stands
ook
try it
thats the result with your rgba
then set a background color on the body
But if i want the background color of body to be white?
Whats the point to change the body
then set a background color on the parent of the element
I just did that
you can check it in my code pen
Is a big container ( the purple one) and inside i have 2 containers (as displayed by the borders ) which i want to be blured
you're right, you did
and the background color still doesn't work because it's a flat color
thats the background color of the parent
yes, it's a flat color
oh really?
To be honest , what is a flat color?
i dont know
it's the same color everywhere
So if i want the background to be this color but apply the blur to the child container , what should i do?
you literally can't
you have to have a gradient or something else
you can't blur a flat color
try adding
background-image: url(https://placedog.net/500/280); to .user__container
you will see it blursyeah it is~
!
you will have to use a gradient or an image
tried this
but still dont apply blur
(btw it looks pretty cool hahah)
which element do you want to blur?
the container which has borders
the child of the parent
you have 2 children from 2 parents that have borders
register__area <-- these?I have the parent which is the whole colored thing
yes
add
background-color: rgba(255, 255, 255, 0.2);it looks like this
you need to have a background to be able to blur it
it's blurring, but very subtle
no its not
yes it is
check very carefully
i removed the blur line and nothing changed
the gradient is less defined
even added some pixels to the blur and also nothing changed
instead of being lighter
add more stops to the gradient
what`s the point, yes we can achieve something like blur trying different things, but i want the backdrop-filter to be applied
i did what im telling you and it works
what?
this here
i did it by adding a background color, and adding a non-uniform background to the parent
right now i have a gradient to the parent
and im saying to add more stops, and you will see it is working
Can you please tell me what are stops?
more colors in the gradient
as many as you can
can you send me what you did
is it a good practice ?
it's exactly what a gradient is supposed to do
you can add 50 if you want
That's what I was trying to say.. you have 1 solid color, that's the problem. A blur of a solid color looks exactly the same as the solid color, if the area you try to blur is inside that solid color. You will only see blur on the edges.
and even on the edges is very generous
I changed it to a gradient , but the blur still does not apply
Can you show that example?
is the parent with the gradient, is the child which i want to be blured
right now i have selected a color with low opacity, so it looks like its blured but it isn`t
If you play around with the you ll see nothing is changing.
the blur is working
the gradient is too uniform
as i said, add more colors to see the effect
Can you send me the css code of the gradient to copy-paste?
there are million of gradient generators online
just try one