Back to updates
Enhancement
Interactions

Apply CSS filters in interactions

We’ve added filters like blur, color inversion, greyscale, and more to interactions so you can create even cooler effects on your sites.

Apply CSS filters in interactions

<p>Applying <a href="<https://university.webflow.com/article/filters>" data-rt-link-type="external">filters</a> on your site (especially for hover states) is a great way to bring attention to something or simply add some character to the page. And you’ve been able to do this for a while now.<br></p><p>But what if I told you that you can now use those same effects in your interactions? You’d be like, “nice.” Well, it’s true. Now you can apply filters in interactions.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1440" style="max-width:1440"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c3f6_nice%20ix2%20filter.gif>" alt="Filters in interactions. Nice."></div><figcaption>Filters in interactions. Nice.<br></figcaption></figure><p>So knock yourself out, go crazy, live life filtered. Get involved!</p>


Launched on
October 4, 2018
Category
Interactions

Related updates

Webflow makes GSAP 100% free

Webflow makes GSAP 100% free

Learn more
Clean up unused interactions

Clean up unused interactions

Learn more
Custom easing curves for interactions

Custom easing curves for interactions

Learn more