Playground · Image Convolution
Image convolution & CNN kernels
A convolution slides a small grid of weights — a kernel — over an image. At every pixel it takes a weighted sum of the surrounding neighbourhood. Change the weights and you get edge detection, blur, sharpening or embossing. The source image below is drawn live in your browser, and the maths is the real 2-D convolution used inside a convolutional neural network.
Source and output
Source image
Convolved output
Preset kernels
Pick a classic filter. Blur kernels sum to more than 1, so they are divided by a normalisation divisor to keep brightness constant; Sobel and emboss add an offset so negative responses stay visible.
The active kernel
Type your own weights — the output recomputes on every change. Divisor scales the sum (use it for blurs); offset is added afterwards (use it to centre signed filters like Sobel at mid-grey).
3 × 3 weights
What is actually happening
A weighted neighbourhood sum
For each output pixel, line the 3 × 3 kernel up over that pixel and its eight neighbours, multiply each pixel by the weight above it, and add the nine products together. The Identity kernel has a single 1 in the centre, so it copies the image unchanged — proof the pipeline is faithful.
Edges, blur & sharpen
Edge and Sobel kernels have positive and negative weights that sum to zero: on a flat region they cancel to black, but at a brightness step they produce a strong response. Blur kernels are all-positive and are divided by their total (9 or 16) to average. A sharpen kernel is the image plus its own edge map.
CNNs learn the weights
Here you hand-pick the nine numbers. A convolutional neural network does the opposite: it starts with random kernels and learns them from data via backpropagation, stacking hundreds of them to build up from edges to textures to objects. See that training loop on the neural network page.
Honest caveat: this is a single 3 × 3 convolution with edge pixels clamped (extended), operating independently on the R, G and B channels. Real CNNs convolve across all input channels at once, apply many kernels per layer, add a bias and a non-linear activation, and often downsample with pooling or strides — and crucially they learn the weights rather than having them typed in. For the bigger picture, explore the neural network playground or the videos on our Learn shelf.