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

If anyone knows any tips or tried something like that before please guide me thanks <3

CodePudding user response：

This is the answer to your question you can play with

background-blend-mode

to achieve different kinds of 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;
}

<div></div>

CodePudding user response：

If you want a 'real' infrared feel, you need to invert the colors of an image and desaturate the result. The inversion will make it feel like objects are glowing. Mix it with a shade of green and you have your 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;
}

<div>
    <img src="https://picsum.photos/600?random">
</div>

CodePudding user response：

It's just that simple:

1. Adding the image to a div
2. Adding a radial-gradient with green and black to the div
3. Adding a mix-blend-mode with overlay to the image itself

The code:

div{
    width: 300px; height: 300px;
    background-image: radial-gradient(green, black);
}

img{ mix-blend-mode: overlay; }

<div>
    <img src="https://source.unsplash.com/300x300">
</div>