Comments on: filter

By: Shikhar

Shikhar — Fri, 05 Jun 2020 18:32:36 +0000

Any idea when filter: custom() feature will be supported by browsers?
Till then is there any way to use svg to apply custom shaders?

By: Selim Rana

Selim Rana — Tue, 16 Jul 2019 06:23:09 +0000

URL with ID based filter not working in Firefox, any solution for it?

For example, check your link: https://codepen.io/grayghostvisuals/pen/noItd in firefox browser.

By: Nico Jacobs

Nico Jacobs — Tue, 26 Feb 2019 09:13:42 +0000

Hi I just stumbled upon one bug. If you use filter on the parent element of a fixed positioned element. Your Position fixed won't work.

By: Chris Coyier

Chris Coyier — Mon, 08 Oct 2018 20:05:57 +0000

In reply to RahulK.

The backdrop-filter CSS property

By: RahulK

RahulK — Mon, 08 Oct 2018 10:28:22 +0000

Hello I want background as a filter blur and whatever text on up it need to normal.
Please any one suggest me solution.

By: rodrigocorreasiade

rodrigocorreasiade — Sat, 01 Sep 2018 18:35:35 +0000

Hi, I've playing with this filters... weird thing is when I was trying to make images white, only the ones on tittle were affected. Not sure why... My code:

img {
    -webkit-filter: brightness(0%);
    filter: brightness(0%);
}

:root {
    filter: invert(150%);
}

By: Eric Bashir

Eric Bashir — Thu, 28 Jun 2018 12:34:41 +0000

Is it possible to apply filter to only a selection? e.g, invert black pixels to white, etc. I really need help on this asap please.

By: Andreass

Andreass — Tue, 27 Dec 2016 04:23:09 +0000

cool stuff..
There is a filter which makes my picture sharper?

Thanks!

By: joey

joey — Thu, 27 Oct 2016 14:48:32 +0000

In reply to Oyvind. The only way of doing this would be to seperate the text and background container and then put the text absolute on top of that container:

<div class="background" style="filter:grayscale(100)"></div>
<div class="text" style="position: absolute; margin-top:-100px">
    I am so funny
</div>

By: Oyvind

Oyvind — Fri, 26 Aug 2016 18:05:33 +0000

how do I apply the filter on the bgImage but not effect the text on top ?

By: @To Hue

@To Hue — Mon, 18 Jul 2016 04:28:16 +0000

In reply to Atul Chaudahry. Hey, you just have to change code from -webkit- to without that (or add new lines without -webkit-). Like that:

img.animated {
  -webkit-animation: filter-animation .5s infinite;
  animation: filter-animation 5s infinite;
}

@keyframes filter-animation {
  0% {
    filter: sepia(0) saturate(2);
  }

50% {
    filter: sepia(1) saturate(8);
  }

100% {
    filter: sepia(0) saturate(2);
  }
}

And then it will work on Mozilla. Chris just write the code only for Chrome and Safari.

By: Hue

Hue — Mon, 23 May 2016 16:27:55 +0000

In reply to Atul Chaudahry.

The animation is NOT working at all on Firefox 46.0.1.
Any ideas?
Cheers…

By: Luuk Lamers

Luuk Lamers — Fri, 13 May 2016 07:24:45 +0000

In reply to Brahma. The image has hotlinking protection for some domains, it seems.

By: Luuk Lamers

Luuk Lamers — Fri, 13 May 2016 07:23:18 +0000

In reply to Justin. If it's an svg icon loaded in, or with some PNGs you could also do: filter: contrast(0) brightness(200%);

By: Avaroth

Avaroth — Tue, 08 Mar 2016 12:18:58 +0000

In reply to Limchilwe. Actually, you need to use -moz for firefox. -ms is for Microsoft Internet Explorer