NVG effects using CSS

Question

I'm trying to make an NVG effect using CSS but I don't know where to start and how to add glow and noise effects and all that stuff.

If anyone knows any tips or has tried something similar please guide me, thanks <3

P粉808697471 · Answer

Here are the answers to questions you can try

Achieve different effects

 div{width: 50vw;
    height: 50vw;
    background-image: url(https://images.unsplash.com/photo-1671938576119-9e1c53d868dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80); / *Photo From Unsplash https:// unsplash.com/*/
    background-color: green;
    background-blend-mode: overlay;
}

P粉982881583 · Answer

If you want a "true" infrared feel, you need to invert the colors of the image and desaturate the result . Inversion makes the object appear to be glowing. Mix that with a shade of green and you get NVG.

div {
    background-color: green;
}
img {
    display: block;
    width: 100%;
    object-fit: cover;

    filter: invert(100%) saturate(0%);

    /* To blend with parent background use: */
    mix-blend-mode: multiply;
}