Image Edge Detection (Sobel / Scharr / Prewitt)
Edge detection finds the places in an image where brightness changes sharply — the silhouette of an object against a background, the boundary between light and shadow, the rim of a building against the sky. Sobel, Scharr, and Prewitt are the three classic 3×3 separable convolution kernels that approximate the horizontal and vertical brightness gradient at each pixel. The gradient magnitude √(Gx² + Gy²) is then thresholded into binary edge / non-edge pixels. Sobel is the textbook choice with weights ±1 ±2 ±1; Prewitt uses uniform ±1 weights (less noise sensitive but less accurate at corners); Scharr uses ±3 ±10 ±3 (the most isotropic, best for sub-pixel work). All three run entirely client-side in your browser — your image never leaves the tab. Add 0–4 passes of box blur first to reduce noise on grainy photos, pick a threshold from 0–255, swap colors for a blueprint / sketch / neon look, and download the result as a PNG.
How to use
- Upload or drag-drop an image (any PNG / JPG / WebP up to 1200 px on the long side).
- Pick an operator — Sobel for general use, Scharr for cleanest contours, Prewitt for the simplest weights.
- Slide the threshold up to thin the edges, down to include subtler gradients.
- Add pre-blur passes if the image is grainy and producing too much noise.
- Swap the foreground / background colors or hit a preset (Classic white-on-black, Blueprint, Sketch, Neon) and download.
Frequently asked questions
- What's the difference between Sobel, Scharr, and Prewitt?
- All three approximate the image gradient using 3×3 kernels. Prewitt uses uniform ±1 weights — fastest, most noise-prone. Sobel adds ±2 in the central row/column — the classic compromise between accuracy and noise. Scharr uses ±3 / ±10 / ±3 — derived analytically for minimal angular error, so diagonal edges are more faithfully captured. For most photos, Sobel and Scharr look nearly identical; Prewitt is visibly noisier on textured backgrounds.
- Why pre-blur the image?
- Edge detectors are gradient amplifiers — they amplify both real edges and random pixel-to-pixel noise. A small blur (one or two passes of a 3×3 box filter) smooths the noise out without significantly softening real edges. This is the same idea behind the 'Canny edge detector', which is just a Gaussian blur + Sobel + non-max suppression. For clean photos you can leave blur at 0; for noisy scans or low-light photos try blur 2 or 3.
- Is my image uploaded anywhere?
- No. The image is read into the browser's canvas and processed locally by JavaScript on your device. Nothing is sent to a server. You can drop sensitive images here without worry; they live only in your tab until you close it.
- Can I detect color edges instead of brightness?
- Not in this version — the input is converted to grayscale luminance (0.299 R + 0.587 G + 0.114 B) first, then the gradient is computed on luminance. This is by far the most common approach because color edges that match luminance edges produce the same result, and pure color boundaries (e.g. pure red against pure green at the same brightness) are visually weak and not what edge detection is usually after.
Related tools
Image Vignette Generator
Add a soft radial vignette to any photo — adjustable amount, softness, radius, oval / circle / rectangle shape, dark or light, any color. 100% in your browser, no upload.
Image Blur
Apply Gaussian, box, or motion blur to any image directly in your browser. Adjustable radius 0-64 px, with the equivalent CSS filter string for copy-paste.
Image Duotone Effect
Apply a two-color duotone effect to any image — pick a shadow color and a highlight color, adjust midpoint and contrast, download the result. Spotify-style covers in two clicks.
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Image Compressor
Compress and resize JPEG, PNG, and WebP images in your browser.
Image Rotate & Flip
Rotate an image 90° at a time or flip it horizontally / vertically, then download the result.