Show HN: CSS Filter Effects

I've used the filter effects for a lot of really useful applications. I'm always surprised though that sepia is an offered filter. It seems pretty kitsch and not that useful, it is effectively grayscale with an additive color overlay of only one color. I don't mind that it is there, but it doesn't seem like a primitive operation like the rest. Perhaps if you could change the overlay then it'd be a lot more useful.

These css effects are pretty cool. But front-enders beware, they can be supersuper slow when trying to animate or even scroll (especially on mobile). If you want to use blurred images let a server do the burring for you.

In Safari, the blur effect should not extend over the boundaries of the object.

Is that a bug or a feature?

Btw, there are some interesting ideas for sliding captchas.

I had way too much fun sliding the Hue Rotation back and forth to create Disco Kitty. Thanks for sharing, I knew about blur and opacity but the rest of these were new to me.

CSS filters are cool! I also made something similar few months back: http://lalwanivikas.github.io/image-editor/

I'm wondering why the greyscale and saturation filters were both necessary. greyscale(0) == saturation(1.0) and greyscale(1.0) == saturation(0.0), with afaik a linear scaling between either.

Now what would be really cool is the ability to define a filter function in JS callable from the CSS. Of course one can do that with canvas.

Cool stuff. Alternatively you could embed images in SVG and apply SVG filters, but it's quite more complicated.

Small typo on "Hue Roatate" FYI

These are cool, but seems like in cases where you want to blur something out on an image you should do so in photoshop on the actual image and not with css. Otherwise someone could just use element inspector to delete the blur effect.

Is there any difference between opacity and filter: opacity ?

Pretty cool. It's simple way to test effects.

Doesn't seem to work with firefox/linux.