How to add a glowing filter to an image

Question

This is the effect I want (the 2nd one):

in photoshop

1) duplicate layer
2) reduce exposure of the new layer
3) add blur
4) blend mode linear dodge (add)

a programmer I knew achieved this effect long ago, he never told how to do it with code but gave me the instructions to achieve the same thing in photoshop

its been a while and started to learn web dev for my own and this effect is something that calls my atention (and yes, lost all posible contact with this person)

at first I thought this was achieved with css filter effects https://www.w3schools.com/cssref/css3_pr_filter.asp

however while it contains the blur(%) I cant seem to find a way to achieve the exposition or even worse the linear dodge blend mode.

Does anyone know how in the earth was this filter made? I am guessing he didnt use css and instead did it with javascript.

Any help is appreciated.

edit: oh you were right, it was just playing with those values, got a nice filter but will keep playing around with them! thank you

To me the difference in those images looks like the contract is higher and that's it.... I think the only way you will find a way to make a specific filter is by playing around, maybe combine a few to see how close you can get to what you want.... — NewToJS, Aug 14 '17 at 23:06
Besides the filter:contrast, it looks like a mask has been applied, which isn't part of any standard. — Rickard Elimää, Aug 15 '17 at 00:06

score 4 · Answer 1 · 2017-08-15T06:16:32.577

You can use various techniques where you blur one version and composite it on top of the original using additive blending.

Here is one example using the image as background image and where the after element inherits the image, adds blur and composite using mix blending and lighten (lighter AKA "add" AKA "linear-dodge", can be used as well):

div {
  background:url(//i.stack.imgur.com/REbGC.png);
  width:190px;
  height:190px;
  }

/* Create an overlay blurring the background */
div:after {
  position:absolute;
  content:"";
  width:190px;
  height:190px;
  background:inherit;
  filter:blur(9px);        /* glow range */
  opacity:0.8;
  mix-blend-mode: lighten; /* lighter (add) can be used as well */
  }

<div></div>

The same can be achieved using a canvas element instead, but since not all browsers support the new filter property on the 2D context you may have to blur manually (added brightness to the demo below as well).

var img = new Image; img.onload = draw; img.src = "//i.stack.imgur.com/REbGC.png";
var blur = document.getElementById("blur"), blend = document.getElementById("blend"),
    luma  = document.getElementById("luma");

function draw() {
  var ctx = c.getContext("2d");
  ctx.drawImage(this, 0, 0);
  ctx.filter = "brightness(" + luma.value + ") blur(" + blur.value + "px)";   // note: not all browsers support this yet (FF/Chrome OK)
  ctx.globalCompositeOperation = "lighten";
  ctx.globalAlpha = +blend.value;
  ctx.drawImage(this, 0, 0);
  ctx.filter = "none";  // reset
  ctx.globalCompositeOperation = "source-over";
}

blur.oninput = blend.oninput = luma.oninput = draw.bind(img);

<div>Blur: <input id=blur type=range min=0 max=30 value=9></div>
<div>Blend: <input id=blend type=range min=0 max=1 step=0.1 value=0.8></div>
<div>Luma: <input id=luma type=range min=0.5 max=2 step=0.1 value=1></div>
<canvas width=190 height=190 id=c></canvas>

How to add a glowing filter to an image

1 Answers1