How to add a Blue Light Filter feature on your site | HTML CSS Quick Tutorial

What is Blue Light?

Blue light is a color in the visible light spectrum that can be seen by human eyes. Blue light is a short wavelength, which means it produces higher amounts of energy.

About Blue Light Filter

The Blue light filter decreases the amount of blue light displayed on the screen of the device. Blue light can suppress the production of melatonin (sleep-inducing hormone), so filtering it out can help you sleep better. It will also reduce digital eye strain, so your eyes won't feel so tired by the end of the day. it becomes less harmful.

How does blue light impact you?

Studies show that exposure to blue light can cause eyestrain, fatigue, headaches, and sleeplessness.

Where is blue light?

Blue light is everywhere in our world. It used to be that the only source of blue light was from the sun. Now we have brought blue light inside by way of digital screens (found on TVs, Smartphones, computers, laptops, tablets and gaming systems), electronic devices, LED and fluorescent lighting.

Blue light filters and protective eyewear

If you are using your phone constantly — especially if you use it primarily for texting, emailing and web browsing — a convenient way to reduce your blue light exposure is to use a blue light filter.

These filters are available for smartphones, tablets, and computer screens and prevent significant amounts of blue light emitted from these devices from reaching your eyes without affecting the visibility of the display.

How to Add on your website

HTML⇨


<div class='b-filter'>
<input class='check' id='b-filter' title='eye care' type='checkbox'/>
<label class='iconmode' for='b-filter'>
<svg class='apply-filter openmode' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C12.36,19.5 12.72,19.5 13.08,19.45C13.03,19.13 13,18.82 13,18.5C13,17.94 13.08,17.38 13.24,16.84C12.83,16.94 12.42,17 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12C17,12.29 16.97,12.59 16.92,12.88C17.58,12.63 18.29,12.5 19,12.5C20.17,12.5 21.31,12.84 22.29,13.5C22.56,13 22.8,12.5 23,12C21.27,7.61 17,4.5 12,4.5M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M18,14.5V17.5H15V19.5H18V22.5H20V19.5H23V17.5H20V14.5H18Z'/></svg>
<svg class='closemode' viewBox='0 0 24 24'>
<path d='M22.54 16.88L20.41 19L22.54 21.12L21.12 22.54L19 20.41L16.88 22.54L15.47 21.12L17.59 19L15.47 16.88L16.88 15.47L19 17.59L21.12 15.47L22.54 16.88M12 9C10.34 9 9 10.34 9 12S10.34 15 12 15 15 13.66 15 12 13.66 9 12 9M12 17C9.24 17 7 14.76 7 12S9.24 7 12 7 17 9.24 17 12C17 12.5 16.9 13 16.77 13.43C17.46 13.16 18.21 13 19 13C20.12 13 21.17 13.32 22.07 13.85C22.43 13.27 22.74 12.65 23 12C21.27 7.61 17 4.5 12 4.5S2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C12.35 19.5 12.69 19.5 13.03 19.45C13 19.3 13 19.15 13 19C13 18.21 13.16 17.46 13.43 16.77C13 16.9 12.5 17 12 17Z'/>
</svg>
</label> </div>

JS ⇨

<script type='text/javascript'>
//<![CDATA[

$(".apply-filter").click(function() { $("body").addClass("blue-filter"); }); $(".closemode").click(function() { $("body").removeClass("blue-filter"); });
//]]>
</script>

CSS ⇨

<style>
body.blue-filter:before { pointer-events: none; content: ''; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background:rgba(255, 255, 0, 0.2); mix-blend-mode: multiply; z-index: 999; } .b-filter{position: absolute; top: 11px; right: 50px; font-size: 19px;z-index:99;} .b-filter svg{width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .b-filter svg path{ fill:#fff; } .b-filter .check:checked ~ .iconmode { cursor: pointer; display: block; background-position: center; transition: all .5s linear; } .check { display: none; } .b-filter .iconmode .openmode{ display:block; } .b-filter .iconmode .closemode{ display:none; } .b-filter .check:checked ~ .iconmode .openmode{ display:none; } .b-filter .check:checked ~ .iconmode .closemode{ display:block; }
</style>

Download Codes

Then Save Theme .

This is How to add a Blue Light Filter feature on your site . Hopefully it can be useful and see you next posting. Best regards, anutrickz.blogspot.com