Skip to content

Instantly share code, notes, and snippets.

@johnferrie
Created October 4, 2012 21:08
Show Gist options
  • Save johnferrie/3836468 to your computer and use it in GitHub Desktop.
Save johnferrie/3836468 to your computer and use it in GitHub Desktop.
CSS3 Filter Effects Sass Mixin
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
//
// grayscale ex: filter: grayscale(100%);
// sepia ex: filter: sepia(100%);
// saturate ex: filter: saturate(0%);
// hue-rotate ex: filter: hue-rotate(45deg);
// invert ex: filter: invert(100%);
// brightness ex: filter: brightness(15%);
// contrast ex: filter: contrast(200%);
// blur ex: filter: blur(2px);
=filter($filter-type,$filter-amount)
-webkit-filter: $filter-type+unquote('(#{$filter-amount})')
-moz-filter: $filter-type+unquote('(#{$filter-amount})')
-ms-filter: $filter-type+unquote('(#{$filter-amount})')
-o-filter: $filter-type+unquote('(#{$filter-amount})')
filter: $filter-type+unquote('(#{$filter-amount})')
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
//
// grayscale ex: filter: grayscale(100%);
// sepia ex: filter: sepia(100%);
// saturate ex: filter: saturate(0%);
// hue-rotate ex: filter: hue-rotate(45deg);
// invert ex: filter: invert(100%);
// brightness ex: filter: brightness(15%);
// contrast ex: filter: contrast(200%);
// blur ex: filter: blur(2px);
@mixin filter($filter-type,$filter-amount) {
-webkit-filter: $filter-type+unquote('(#{$filter-amount})');
-moz-filter: $filter-type+unquote('(#{$filter-amount})');
-ms-filter: $filter-type+unquote('(#{$filter-amount})');
-o-filter: $filter-type+unquote('(#{$filter-amount})');
filter: $filter-type+unquote('(#{$filter-amount})');
}
img {
-webkit-filter: grayscale(100%);
-moz-filter: greyacale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); }
img
+filter(grayscale,100%)
img {
@include filter(grayscale, 100%);
}
Copy link

ghost commented Jul 14, 2016

Nice 👍

@krueschi
Copy link

Hi, good tip and very usable. Tested in most recent firefox and chrome, works great. Tested in IE11 (Edge engine and below) not working. Do you have any tips or is the -ms / filter known for not working in IE?
Thanks a lot

@Irandoust
Copy link

Thanks so much, It speeds up working.

@e10101
Copy link

e10101 commented Aug 23, 2016

The SCSS version can not be used in Chrome. but the following code works:

@mixin filter($filter-type,$filter-amount) {
  -webkit-filter: unquote($filter-type+unquote('(#{$filter-amount})'));
  -moz-filter: unquote($filter-type+unquote('(#{$filter-amount})'));
  -ms-filter: unquote($filter-type+unquote('(#{$filter-amount})'));
  -o-filter: unquote($filter-type+unquote('(#{$filter-amount})'));
  filter: unquote($filter-type+unquote('(#{$filter-amount})'));
}

@erezLieberman
Copy link

great! thank you!

@JuanGarassino
Copy link

👍

@xzykho
Copy link

xzykho commented Sep 3, 2017

I like this a lot...

@ironicmoka
Copy link

Many thanks!

Any chance to have it work with multiple filters at once? like

filter: grayscale(100%) blur(5px)

@overcome
Copy link

overcome commented Dec 8, 2017

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment