Portrait mode on a phone does something a lens cannot: it decides, per pixel, how far away that pixel is, and blurs accordingly. On a good day the result is convincing. On a bad day there is a chunk of somebody’s shoulder in sharp focus while their ear is soft, because the phone drew a line around the subject and blurred everything on the other side of it.
That is the giveaway of a cutout blur, and it is what most background blur tools do. Separate subject from background, blur the background, put the subject back on top. It produces a hard boundary between sharp and soft, which is a thing that has never happened in an optical photograph.
A real lens does not know what a subject is. It has a plane of focus at some distance, and everything is progressively less sharp the further it sits from that plane. The hair at the back of somebody’s head is slightly softer than the hair at the front. Reproducing that needs a number per pixel: how far away is this.
Estimating distance from one photograph
Monocular depth estimation does exactly that. Give it a single ordinary photograph, no second lens, no depth sensor, and it returns a map the same shape as the picture where each value says how near or far that pixel is. It learned to do this from an enormous number of pictures whose real depth was known, and what it actually learned is every cue a person uses without noticing: things lower in the frame are closer, textures get finer with distance, known objects have known sizes, occlusion tells you what is in front of what.
The output is relative and has no unit. It will not tell you that the chair is 2.3 metres away. It will tell you the chair is nearer than the window and further than the cup, and for making a picture that is enough. The tool below runs one such model and shows you both halves: the map itself, which is interesting on its own, and what happens when you use it. Everything runs in this browser tab and the photograph is never uploaded.
Depth map and lens blur
This estimates how far away every pixel of a photograph is, and then uses that estimate twice. It shows you the depth map itself, as a greyscale picture you can download and keep working with, and it blurs the photograph so that the blur grows with distance, the way a lens with a wide aperture does. The network weighs about 20 MB and is fetched from this site only after you ask for it. Your photograph is read here in this browser tab, never uploaded, and there is nowhere for it to be uploaded to.
or press Enter to pick one. JPEG, PNG or WebP.
Sample photo, drawn in this browser.
The depth map is a picture in its own right. It saves as a PNG, so you can take it into an editor and use it as a mask, a gradient for grading, or the input to something else entirely.
The network predicts inverse depth, so a large number means near, and that is the assumption everything here follows. It is worth a switch because the convention is not universal: some exports of the same network are flipped, and a scene shot through glass or into a mirror can be read the wrong way round. If your depth map comes back with the background bright and the subject dark, tick this and the sharp zone follows it.
Which depth stays sharp. All the way left is the nearest thing in the frame, all the way right is the horizon.
How soft the farthest layer is allowed to get.
How quickly the blur grows with distance from the plane you focused on. A short transition behaves like a fast lens and separates hard, a long one keeps most of the scene readable.
| What happened | Value |
|---|
What this deliberately cannot do. The depth is estimated, not measured. In front of patterned wallpaper, or across a reflection in a window, the network reads the pattern as structure and puts it at the wrong distance, and then the wrong thing goes soft. Real bokeh also shapes bright points into discs, because a lens has an aperture with a shape; this only draws them softly, so a night scene with street lamps in it will not come back looking like a fast prime. And a subject that is hard to separate from its background stays hard to separate here: if a strand of hair lies against a wall at the same distance, the depth map puts both at that distance and treats them alike.
Why this is not a cut out with a blur behind it. The usual way to fake a shallow depth of field is to segment the subject, blur everything else, and paste the subject back on top. That leaves a hard edge in exactly the place where a lens leaves none, which is why those pictures give themselves away at hair, at thin branches and along a shoulder. Here every pixel takes its own amount of blur from its own depth, so the amount grows across an edge instead of jumping at it, and a hand held out towards the camera goes soft at the fingertips rather than all at once. The trade is that the depth is a guess: a wrong guess is smoothly wrong rather than sharply wrong. Comparable tools exist and several of them are good. The only thing unusual here is the mechanism, that the network runs inside this tab and the picture never leaves it.
The map is the useful output
Do not skip past the depth map view on the way to the blur. A depth map is a working asset in its own right, and the tool offers it as a PNG download for that reason.
With one you can drive a fog that thickens with distance, a colour grade that cools the background and warms the foreground, a parallax effect where near things move further than far things, or a displacement in whatever editor you already use. All of those are things you can do with a grey image and none of them require this tool. What required this tool was getting the grey image at all.
It is also the fastest way to predict whether the blur is going to work. If the map shows the subject as a clean bright shape against a darker field, the result will be good. If the subject’s edges are mushy, or a patterned wall behind them reads as though it is at four different distances, the blur will be wrong in exactly those places, and you will have found that out in a second rather than after fifteen minutes of adjusting sliders.
Why the model rounds your picture to a multiple of fourteen
Feed the tool a photograph 1600 pixels wide and the model will see it at some size that is a multiple of fourteen, which looks like an arbitrary superstition until you know where the number comes from.
This family of models does not process pixels. It cuts the picture into square patches, fourteen pixels on a side, turns each patch into a vector and reasons about the sequence of vectors. An image whose dimensions are not a multiple of the patch size cannot be cut into whole patches, so the size is adjusted first. The same constraint shows up as eight or sixteen in other architectures and it always has the same cause.
It has a practical consequence worth knowing. The depth map comes back at the patch grid resolution, not at your photograph’s resolution, and is stretched to fit. So the map is genuinely coarser than the picture, and expecting pixel accurate edges from it is expecting something the architecture cannot produce. That is another reason the layered blur is the right shape of answer: it is tolerant of a map that is approximately right, whereas a hard cutout driven from the same map would show every place the boundary landed a few pixels off.
Why the blur is built in layers
The obvious way to blur by depth is to blur each pixel by its own radius. It is also the wrong way, for two reasons. It is slow, because there is no shortcut for a per pixel variable kernel in a canvas. And it is wrong at edges, because a sharp foreground pixel sitting next to a heavily blurred background pixel will pull colour from its blurred neighbour or fail to, depending on the order of operations, and either way you get a halo.
So the tool blurs the whole picture six times at increasing radius, producing a stack of layers from sharp to very soft, then walks the pixels once and mixes between the two layers that bracket that pixel’s blur amount. A pixel that wants a radius halfway between layer three and layer four gets half of each.
amount = clamp(|depth - focus| / transition, 0, 1) * strength
layer = amount * (layers - 1)
low = floor(layer)
result = mix(stack[low], stack[low + 1], layer - low)This has a pleasant side effect that shows up in the tool’s behaviour. The layer stack depends only on the picture, not on where the sliders are, so moving the focus, strength or transition slider recomposes from the layers already in memory without going near the model again. The model runs once per photograph. Everything after that is instant.
The three sliders and what each is for
Focus distance chooses which depth stays sharp. It is not a subject picker: setting it to the far end and blurring the foreground is a legitimate and under-used look, and it is the only way to get it in a tool that thinks in terms of subjects.
Strength is the maximum blur applied to the furthest thing from the focus plane. It is the one people push too far. A real portrait lens at a wide aperture does less than you think, and the moment the background becomes an unreadable wash the picture stops looking photographed.
Transition is the one that actually decides whether the result reads as optical. It sets how quickly sharpness falls away with distance from the focus plane, which is the photographic idea of depth of field. A short transition is a fast lens at close range and a long one is a landscape at f/11, and getting this wrong is more visible than getting the strength wrong.
A detail worth stealing
There is a trap in blurring with a canvas that is not obvious until you see the result. Setting a blur through the canvas filter and drawing the image fades the outermost pixels towards transparent, because the filter samples beyond the edge of the source and finds nothing there. The result is a pale border a few pixels wide around the whole picture, and it gets worse with every additional layer, so on the softest layer it is a visible glow.
The fix is to blur inside a larger canvas whose margin is the outermost row and column stretched outwards, then crop back to the original rectangle. The filter then samples into real colour instead of into nothing. It costs a few lines and it is the difference between a tool that looks finished and one that has a halo nobody can explain.
Reading a depth map without being fooled by it
Depth maps are shown as grey images and grey images invite a reading they do not deserve. Two habits help.
The first: check the extremes. The map is normalised so that the nearest thing in the frame becomes white and the furthest becomes black, which means a photograph of a flat wall produces a full range map of what is essentially noise. If nothing in your picture is meaningfully nearer than anything else, the map will still look confident and will still be meaningless. The blur will then vary across a flat surface for no reason.
The second: compare the map against the photograph rather than reading it on its own. If the map looks like a black and white version of the picture, with the same bright and dark areas in the same places, treat that as a warning. A depth map should follow the geometry of the scene and a greyscale conversion follows the tones, and where the two coincide you cannot tell which one you are looking at. The honest response is to check one specific thing: pick two objects you know are at different distances but similar brightness, and see whether the map separates them. If it does not, the blur will not either, and the invert box will not help because there is nothing to invert.
What it deliberately cannot do
The depth is estimated and not measured, and it fails in the places you would expect once you know what it is doing. A wall with a strong repeating pattern gives it false texture cues. A mirror or a window returns the depth of the reflected scene rather than the surface. Glass is essentially invisible to it. Where the depth is wrong, the blur is confidently wrong in the same place.
It is also not real bokeh. An out of focus highlight in an optical photograph becomes a disc, the shape of the aperture, which is why night photographs taken at a wide aperture have those circles in them. A Gaussian blur spreads that highlight into a smear instead. On a portrait in even light nobody will notice. On a photograph with point lights in the background everyone will.
And a subject that is hard to separate from its background stays hard to separate. If a person in a dark coat is standing in front of a dark doorway, the model has the same trouble your eye does, and no slider recovers a boundary the map never had.
Where it fits
Comparable tools exist and phones do this in hardware. The mechanical difference here is that the weights come to your browser and the photograph stays in it, which matters for some pictures and not for others. The other difference is that you get the map, and most tools that do this keep it to themselves.
If the picture also needs its exposure fixed, do that first and the depth estimate second: the model reads a very dark photograph less confidently than a well exposed one. If what you actually wanted was a clean edge rather than a gradient, because the subject is going onto a different background entirely, that is a cutout and not a blur, and the two are worth keeping apart in your head. And if the result is going onto a page where text sits over it, the blur is doing a second job and the amount you need is set by a contrast figure rather than by taste that has nothing to do with realism and everything to do with contrast.
The broader point is that a depth map turns a photograph from a flat array of colours into something with a third coordinate, approximately. Almost every effect that people describe as looking cinematic is really an effect that needs to know that coordinate, which is why they were hard before and are easy now. The model is not doing the effect. It is supplying the one missing number that all of the effects were waiting for.
