filter vs backdrop-filter

Differences, and why filter is not working in my case here:

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 20;
  filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 20;
  filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
}

18 Replies

13eck•2y ago

Please read #How To Ask Good Questions . Right now we don't know what you expect it to do so we can't answer why it's "not working". What is it currently doing? What do you expect that it should be doing? What's the HTML look like?

PerpetualWar•2y ago

It is not applying filter. Like I haven;t added it at all. Html is

<div class="backdrop"></div>
All seems straightforward
but it is not applying anything.

backdrop-filter

 works though and I fail to realize why?
I would prefer

filter` as it has better browser support

<template>
  <Portal to="modal" :order="portalOrder">
    <div class="modal-wrapper">
      <div v-if="open" class="backdrop"></div>
      <Transition name="htl-drop">
        <div v-if="open" class="modal">
          <OutsideClickContainer
            @outside-click="$emit('cancel-modal-action')"
            active
          >
            <div
              :class="
                !customStyleExist ? 'modal-content' : 'modal-custom-width'
              "
              :style="calcCustomStyle"
            >
              <slot />
            </div>
          </OutsideClickContainer>
        </div>
      </Transition>
    </div>
  </Portal>
</template>

<template>
  <Portal to="modal" :order="portalOrder">
    <div class="modal-wrapper">
      <div v-if="open" class="backdrop"></div>
      <Transition name="htl-drop">
        <div v-if="open" class="modal">
          <OutsideClickContainer
            @outside-click="$emit('cancel-modal-action')"
            active
          >
            <div
              :class="
                !customStyleExist ? 'modal-content' : 'modal-custom-width'
              "
              :style="calcCustomStyle"
            >
              <slot />
            </div>
          </OutsideClickContainer>
        </div>
      </Transition>
    </div>
  </Portal>
</template>

this is component html

Kevin Powell•2y ago

the filter that you put above should blur everything, including the content inside that element... backdrop-filter blurs what's behind the element

13eck•2y ago

backdrop-filter has great browser support:

Kevin Powell•2y ago

https://codepen.io/kevinpowell/pen/VwdrQqR

PerpetualWar•2y ago

aha, so if I understand correctly, it seems I should be using backdrop-fiilter here?

13eck•2y ago

The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.

–https://css-tricks.com/almanac/properties/b/backdrop-filter/ So depending on if you want the background or bg and foreground should determine which property you use

PerpetualWar•2y ago

Agreed, but since this class is only used to 'create;' backdrop, I don't see why normal filter is not applying? or maybe it is, but since I only have transparent backgrouond color I cannot see it?

Kevin Powell•2y ago

If you open my pen linked above (I just updated it), it won't blur what's behind it, only what's inside it the update makes it more obvioous so if you're only trying to use that to blur other content, it won't have an effect

PerpetualWar•2y ago

aha, I think I get it its just wrong solution in my case then

13eck•2y ago

It's things like that that make me wonder what CSS would look like if the CSSWG started over from scratch and completely re-did the spec think

PerpetualWar•2y ago

ye, this codepen is really helpful to see in detail, thanks @Kevin and also @cvanilla13eck

13eck•2y ago

👍 Once you get Kevin and myself talking, it's hard to shut us up! lol

PerpetualWar•2y ago

Thanks a lot, appreciated 😉 Btw great content @Kevin , I follow you on a regular basis, always nice stuff on youtube chan 😉

Kevin Powell•2y ago

Thanks 😄 You might see something based on this on the channel in a few weeks 😉

PerpetualWar•2y ago

Word 😉

PerpetualWar•2y ago

I just proved to myself as well,,, I added text with color: white inside this div and it has blurred content, and behind its still not blurred

PerpetualWar•2y ago

that kinda threw me off (not having any content in this div to see filter being applied) Im off...cheers guys 😉

Gaming

Programming

filter vs backdrop-filter