[Feature Request] blur for filter and backdrop-filter

[iduuck]

I would like to have something where I can blur an element with (perhaps even blur the background).

Blur of an element

This can be achieved with the following code:

.blur {
  filter: blur(8px);
}

Blur of the background

This can be achieved with the following code:

.bg {
  backdrop-filter: blur(0.8);
}

[Macxim]

Check out this plugin: https://github.com/benface/tailwindcss-filters

[michael-andreuzza]

Hey Macxim,

Is there a list of the classes for this?

Thanks in advance,

[SamuelKinuthiaK]

Thank you so much Macxim. You've really helped me alot.

[iduuck]

Thanks, @Macxim! However, I think this would be a good addition to Tailwind. Have you seen my PR (#1881), which contains various customisation options, that the plugin does not offer?

[MartinHughes-BPC]

Hi iDuuck,

I'm curious - would your PR allow chaining of filters, such as combining blur and sepia, or blur and grayscale?

Thanks,
Martin.

[iduuck]

Definitely. It's build so that you can combine them easily.

[Macxim]

Just checked it out, sorry for the delay.
It looks pretty cool, indeed. Good job!

[Jinsung-L]

I built a plugin for CSS filters and backdrop filters.
You can apply multiple filters at once using this plugin.

I think I used the same mechanism that you used in the PR. It could've been much easier job if I could see your PR before I started building my plugin. 😅

Anyway you can use this plugin meantime.
https://github.com/Jinsung-L/tailwindcss-filters