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%);
}
@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