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

…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.


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

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.

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 -.-

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.

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.

1 Like