How to enable CSS3 filters in Microsoft Edge

With launch of Microsoft Edge and its new developer options, users are looking for some advanced features in it. One of the advance feature so added is CSS3 filters which allows one to change the element rendering even before it’s displayed in the document. Options which we get after enabling CSS3 filters are blur, sepia, saturate, hue-rotate, invert, brightness, contrast, and opacity(via @keyframes).

For successfully using CSS3 filters you must be using a browser that supports CSS3 filters or you activate them via about:flags in case you’re using Microsoft Edge. It’s quite simple to activate CSS3 filters using about:flags. Open about:flags page then look for a checkbox with “Enable CSS filter property“. Check that checkbox and restart the browser for changes to take effect.

When you enable this filter property you’ll be able to use CSS3 filters on your web page using simple code as for example (from www.modern.ie):

img {

filter: grayscale(50%) opacity(10%);

}

@keyframes filter-animation {

0% {

filter: opacity(0);

}

50% {

filter: opacity(100%);

}

100% {

filter: opacity(0);

}

You’ll get several filters enabled and can directly use for your work. After enabling CSS Filters you can have look of samples of filters like:

You can have look over demo of CSS Filters @Modern IE demo site. Stay connected for more features of Microsoft Edge and lots more developer options to come.