SquareImage

Blurred Frame for Photos

Add a soft side blur to a photo while keeping the original image clear in the center. Adjust the foreground scale, blurred background, intensity, and aspect ratio before downloading a PNG. The edit runs in your browser.

Blurred Frame, at a glance

Blurred Frame on SquareImage.dev fits a whole photo inside a fixed aspect ratio and fills the leftover space with an enlarged, blurred copy of the same photo, so nothing is cropped away. Four controls shape the result: aspect ratio (1:1, 2:3, 16:9 or a custom ratio), main image scale, background scale and blur intensity. It exports PNG only, at four times the editor's working canvas, and it handles one image at a time; for JPEG or WebP output use the main SquareImage converter. It is free, needs no account, and the photo is composed on the device with Canvas rather than uploaded.

By · Verified

How do I add a blurred frame to a photo?

  1. Upload one image. Choose a photo your browser can open.
  2. Select an aspect ratio. Use 1:1, 2:3, 16:9, or enter a custom width-to-height ratio.
  3. Fit the main photo. Adjust Main Image Scale so the important content stays visible.
  4. Fill the background. Change Background Image Scale to control how the enlarged copy covers the frame.
  5. Set the blur. Move Blur Intensity until the center image separates clearly from the side blur.
  6. Download the result. Save the composed frame as a PNG file.

What is a side blur photo frame?

A side blur frame uses an enlarged, blurred copy of the source image as the background. The complete original is placed above it at a smaller scale. This fills otherwise empty space without stretching the foreground or cutting off the edges.

The method is useful when a wide or tall photo needs to fit a square or another fixed ratio. Unlike a crop, the entire foreground can remain visible. Unlike a solid border, the background reuses colors from the photo.

What do the controls in the blurred frame editor do?

  • Aspect Ratio: changes the shape of the exported canvas. A custom ratio such as 4:5 can also be entered.
  • Main Image Scale: controls the size of the sharp foreground image inside the frame.
  • Background Image Scale: enlarges the background copy so it continues to cover the canvas.
  • Blur Intensity: changes how soft the background appears.
  • PNG download: exports the current composition at four times the editor's working canvas size.

How do I get a clean blurred background?

  • Keep faces, text, and product details in the sharp foreground rather than the blurred background.
  • Use enough blur to separate the two layers, but preview the colors before downloading.
  • If the background shows empty edges, increase Background Image Scale.
  • Choose 1:1 when you need a square image. Use the custom option only with positive width and height values.

Is my photo uploaded to a server?

The image is read with browser file APIs and rendered on a local canvas; this tool does not send the photo to our server. It processes one image at a time and exports PNG only. Very large source files may use substantial memory on a phone or tablet.

Frequently asked questions

Does the blurred frame crop my original photo?

The foreground image is fitted inside the selected frame, so the complete source can remain visible. The enlarged background copy fills the remaining area.

Can I create a square side blur?

Yes. Keep the aspect ratio set to 1:1, then adjust the two scale controls and blur intensity.

Can I choose JPEG or WebP?

This advanced editor currently downloads PNG. For JPEG, PNG, or WebP output in a square format, use the main SquareImage converter.

Can I crop instead of adding blur?

Yes. Open the Square Crop tool to position a manual 1:1 crop.

Can I use this on a video?

No, this editor works on still images. If a clip has to fit a chat upload limit instead, the browser-based Discord 10MB video compressor shrinks the file without an upload.

Every tool on this site draws your photo onto an HTML canvas and reads the result back out — that is the whole pipeline, which is why nothing is uploaded and why the export size behaves the way it does. The browser's own documentation describes the drawing step:

“drawImage() will always use the source element's intrinsic size in CSS pixels when drawing, cropping, and/or scaling.”
— MDN Web Docs, CanvasRenderingContext2D: drawImage() method

Sources

Links checked 2026-09-03.

Other image tools on this site