# Floating Custom Filters Wizardry in Glide

**URL:** <https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166>\
**Category:** Community Resources\
**Created:** [September 3, 2025, 3:34pm UTC](https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166 "2025-09-03T15:34:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mariusz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mariusz/32/89415_2.png) [@Mariusz](https://community.glideapps.com/u/Mariusz)\
**Post date:** [September 3, 2025, 3:34pm UTC](https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166/1 "2025-09-03T15:34:25Z")

</div>

Hi everyone, pleased to share my first tutorial on building next-level custom filters in Glide.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/2/c2c26504f6953696e43235e2353b360c09366c98.jpeg)

In the video I explain my approach to building custom filters and the techniques I applied. It’s not a step-by-step tutorial and I assume many parts were self-explanatory, hence I’d say I recommend it for experienced Glide builders.

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/e/ce492eff4dbef40ab2d4a5973c7e5508e6e936e8.jpeg "Floating Custom Filters Wizardry in Glide") ](https://www.youtube.com/watch?v=BJrDgHwB8SQ)

The feature heavily relies on CSS, includes a small Glide stunt in the form of half-styled container and utilizes Maxime Baker’s AI data change listener component.

Everything else beside that should be known to anyone who has built a custom filter before.

If you have questions, post them here!

Hope you enjoy.

Here’s the CSS for the drop-down container:

```auto
.filter-drop-down {position: sticky;height: 0px;top: 0;z-index: 9999;opacity: 0;animation: fadeIn 0.1s ease-in forwards;}

.filter-drop-down div > div > div > div:nth-child(2) {margin-top: 20px;z-index: 9999;background-color: #FAFAFA;border-radius: 12px;;padding-left: 24px;padding-right: 24px;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08),0px 3px 7px rgba(0, 0, 0, 0.11);}

```

Event listener AI component (originally by Maxime Baker): [DataWatcher - Glide custom component](https://components.glide.info/share/commit::16b8bc0f-b2e5-d3dc-b1e7-808aa6349ece)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [October 11, 2025, 12:07am UTC](https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166/2 "2025-10-11T00:07:16Z")

</div>

Thanks for the shout out! ❤

---

<div class="post-metadata">

**Author:** ![Mariusz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mariusz/32/89415_2.png) [@Mariusz](https://community.glideapps.com/u/Mariusz)\
**Post date:** [November 13, 2025, 3:39pm UTC](https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166/3 "2025-11-13T15:39:16Z")

</div>

Update: I didn’t inlude the animation in the css snippet in my post, so if you copied this and left opacity: 0, the component wouldn’t show up.

Here’s the missing fade-in animation:

@keyframes fadeIn {  
from {  
opacity: 0;  
transform: translateY(0px);  
}  
to {  
opacity: 1;  
transform: translateY(0);  
}  
}

Thanks @MaximeBaker for spotting this.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2025, 3:47pm UTC](https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166/4 "2025-11-13T15:47:27Z")

</div>

It seems that Glide’s default CSS already includes a fade-in animation called **“fade-in”** , so you don’t need to add your own code for it.

---

<div class="post-metadata">

**Author:** ![Mariusz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mariusz/32/89415_2.png) [@Mariusz](https://community.glideapps.com/u/Mariusz)\
**Post date:** [November 13, 2025, 4:00pm UTC](https://community.glideapps.com/t/floating-custom-filters-wizardry-in-glide/84166/5 "2025-11-13T16:00:24Z")

</div>

I wasn’t aware how it’s named. That’s a good point, thanks!