Can Opera Mini’s “reduce eye strain” filter be achieved in CSS?


#1

…we have also added a “reduce eye strain” mode, which changes the tone of the light emitted by the screen from blue-violet to warm red-orange, which is more pleasant at night, reduces eye fatigue, and won’t keep you awake.

Source: http://blogs.opera.com/mobile/2015/05/opera-mini-night-mode-reduces-eye-strain-night-browsing/

This sounds like something web apps might want to provide as an optional filter.


#2

The simplest way I can think to accomplish this is to add a giant pointer-events: none div over the entire screen with an off-white low alpha and one of those Adobe blend modes.

For best results, maybe use a pseudo-element like body::after.


#3

I actually thought you could apply such a filter on the entire page by merely setting a CSS value on <body>. I guess, that would be just too easy -.-


#4

No, you’re right - you can set a filter rule directly on body. Just tested this now. To achieve a channel-biased filter, you also need to create an SVG element or CSS shader.


#5

It might be doable with <feComponentTransfer>. SVG filter primitives are really weird and seem like they were grafted on from someplace else, so they tend to be capable of things you woudn’t necessarily suspect.